jack sparrow jack sparrow - 1 month ago 16
jQuery Question

trying to set focus on a hidden text box

I am trying to set focus on a hidden text box. I want that when the body or div containing the text box loads the focus should be on the particular text box so that any input from key board or any other device is caught by this element. I have tried the following code with no effect:

<body>
<input type="text" id="exp" maxlength="16"></input>
<input type="text" id="exp2" maxlength="16"></input>
<script>
$("#exp").hide();
$("#exp").focus();
$("#exp2").keypress(function(){
alert($("#exp").val());
});
</script>
</body>


make any suggestions. jquery solution will be preferred.

Answer

You can't set focus to a text box that is hidden through the hide method. Instead, you need to move it off screen.

<body>
<!-- it's better to close inputs this way for the sake of older browsers -->
<input type="text" id="exp" maxlength="16" />
<input type="text" id="exp2" maxlength="16" />
<script>
// Move the text box off screen
$("#exp").css({
    position: 'absolute',
    top: '-100px'
});
$("#exp").focus();
$("#exp2").keypress(function(){
alert($("#exp").val());
});
</script>
</body>