I have this script where i want cursor to be focused on hidden field but it doesn't seem to be working . When i make the field visible it seems to work.

$(document).ready(function(){
    $("#card_number").focus();
    $("#card_number").keypress(function() {
       alert($("#card_number").val());
    });
});

I have this script where i want cursor to be focused on hidden field but it doesn't seem to be working . When i make the field visible it seems to work.

$(document).ready(function(){
    $("#card_number").focus();
    $("#card_number").keypress(function() {
       alert($("#card_number").val());
    });
});

• javascript
• jquery
• html

• 2 Hidden inputs cannot have focus, they are hidden. If you mean you used CSS to set the visibility, please show the corresponding CSS. – CodingIntrigue Commented Aug 2, 2013 at 6:48
• 1 Do you mean 'hidden' as in <input type="hidden" /> or as in <input type="text" style="visiblity: hidden;" />? – aroth Commented Aug 2, 2013 at 6:48
• Hidden inputs can't gain focus nor even other UI events as they remain hidden or don't occupy any space in view. Focusing inputs fields that are kept hidden from users don't make any sense. – Ashis Kumar Commented Aug 2, 2013 at 6:53
• i even tried with CSS its the same – poojitha Commented Aug 2, 2013 at 6:54

8 Answers 8

You can't focus on a hidden element.

You can use opacity: 0 instead of display: none and you will be able to focus on the element.

i found the solutions by trying out your comments , you can't use visibility: hidden; . You have to use opacity zero

#card_number{

    opacity: 0;
}

Thanks fellas you were great This is for an auto login feature

As far as I know this isn't possible for a hidden field. What you might want to do is set the opacity of the input field to 0 via CSS.

I wanted to do this same thing to use with a scanning device without the user seeing the numbers flying in.

I tried Opcacity:0 but when it has focus you see the text cursor blinking which is not optimal.

What I did, that works neatly is: {position: fixed; left: 300em}

The reason is the field is hidden.

Don't hide the field just try to make the opacity to 0% using CSS

Focus function is not work with hidden fields. Make the opacity to zero

1. $('#card_number').css({'width': '0px','height':'0px','left': '-900px' , 'visibility': 'visible', 'position': 'absolute'}); - actually visible but it should out from screen

2. calling focus $('#card_number').focus(); or any other way also work.

You cant focus on any hidden field. What are you trying to achieve here.