CODEWITHSUNDEEP
htmlcss
ojek
ojek

Reputation: 10056

Keep div displayed when input inside of it has focus

<div>
   <input type="text"/>
</div>

I have a div element with input inside of it. Now, this div has display: none property on it. Now, when I display the div (by hovering at another element on my site, not important here), I can now put some text in the input element. But when I have focus on that input, and I accidentally move my mouse out of the div element, this div element disappears. Is there any chance that I can keep my div element displayed when the input has focus no matter where the mouse is?

Edit: After editing Sergio's example, here is the problem I am facing: http://jsfiddle.net/2thMQ/1/ (try typing something in that input field and then move your mouse away)

Upvotes: 3

Views: 1873

Answers (1)

Sergio
Sergio

Reputation: 28837

Use input:focus { display:block; }

DEMO

Only CSS

div:hover input {
    display:block;
}
input:focus {
    display:block;
}
input {
    display:none;
}

If you want to style the parent div it will be possible in CSS4. So far here is a javascript solution for this:

var inp = document.getElementsByTagName('input');
for (var i = 0; i < inp.length; i++) {
    inp[i].onfocus = function(){ this.parentNode.style.display='block';}
    inp[i].onblur = function(){ this.parentNode.style.display='none';}
};

demo

Upvotes: 5

Related Questions