javascript - set the focus to <select> element - Stack Overflow

admin管理员组

文章数量:1352124

I have a form for sign up, the first element is the textbox and the second element is the select.

When I press the Enter key, i want the focus set at the select element.

$('#newUserId').keypress(function(event){
    if (event.which == 13)
    $('#newUserId:first').focus();
});

I have also looked around, and even this link and this link does not help, when i press enter key, it does nothing. but when I check to set the focus on other textbox element, it did change focus.

My HTML Form:

<form name='formCreateNewUser' id='formCreateNewUser' method='post' action=''>
        <label> Create New User </label> <br />
           <input autoplete='off' name='newUserId' id='newUserId' class='newUser' 
              type='text' size='17' maxlength='17' placeholder='ID No.' 
        /> <span id='newUserIdResult'> </span><br /><br />
        <select name='newUserType' id='newUserType' class='newUser'>
           <option class='newUser' value=0>User Type</option>
           <option class='newUser' value=1>Student</option>
           <option class='newUser' value=2>Teacher</option>
           <option class='newUser' value=5>Admin</option>
        </select> <br /><br />
        <input autoplete='off' name='newUserPass' id='newUserPass' class='newUser' 
            size='17' maxlength='17' placeholder='Password' type='password' 
        /> <br /><br />
        <input autoplete='off' name='newUserConfPass' id='newUserConfPass' class='newUser' 
           size='17' maxlength='17' placeholder='Confirm Password' type='password' 
        /> <br /><br />
        <input autoplete='off' name='newUserFirstName' id='newUserFirstName' class='newUser' 
           size='17' maxlength='17' placeholder='First Name' type='text' 
        /> <br /><br />
        <input autoplete='off' name='newUserMiddleName' id='newUserMiddleName' class='newUser' 
           size='17' maxlength='17' placeholder='Middle Name' type='text' 
        /> <br /><br />
        <input autoplete='off' name='newUserLastName' id='newUserLastName' class='newUser' 
           size='17' maxlength='17' placeholder='Last Name' type='text' 
        /> <br /><br />
        <button name='newUserSubmit' id='newUserSubmit' class='operationstylebutton' type='button' >Create User</button>
        </form>

I have a form for sign up, the first element is the textbox and the second element is the select.

When I press the Enter key, i want the focus set at the select element.

$('#newUserId').keypress(function(event){
    if (event.which == 13)
    $('#newUserId:first').focus();
});

I have also looked around, and even this link and this link does not help, when i press enter key, it does nothing. but when I check to set the focus on other textbox element, it did change focus.

My HTML Form:

<form name='formCreateNewUser' id='formCreateNewUser' method='post' action=''>
        <label> Create New User </label> <br />
           <input autoplete='off' name='newUserId' id='newUserId' class='newUser' 
              type='text' size='17' maxlength='17' placeholder='ID No.' 
        /> <span id='newUserIdResult'> </span><br /><br />
        <select name='newUserType' id='newUserType' class='newUser'>
           <option class='newUser' value=0>User Type</option>
           <option class='newUser' value=1>Student</option>
           <option class='newUser' value=2>Teacher</option>
           <option class='newUser' value=5>Admin</option>
        </select> <br /><br />
        <input autoplete='off' name='newUserPass' id='newUserPass' class='newUser' 
            size='17' maxlength='17' placeholder='Password' type='password' 
        /> <br /><br />
        <input autoplete='off' name='newUserConfPass' id='newUserConfPass' class='newUser' 
           size='17' maxlength='17' placeholder='Confirm Password' type='password' 
        /> <br /><br />
        <input autoplete='off' name='newUserFirstName' id='newUserFirstName' class='newUser' 
           size='17' maxlength='17' placeholder='First Name' type='text' 
        /> <br /><br />
        <input autoplete='off' name='newUserMiddleName' id='newUserMiddleName' class='newUser' 
           size='17' maxlength='17' placeholder='Middle Name' type='text' 
        /> <br /><br />
        <input autoplete='off' name='newUserLastName' id='newUserLastName' class='newUser' 
           size='17' maxlength='17' placeholder='Last Name' type='text' 
        /> <br /><br />
        <button name='newUserSubmit' id='newUserSubmit' class='operationstylebutton' type='button' >Create User</button>
        </form>

• javascript
• jquery
• html

Share Improve this question Follow edited May 23, 2017 at 12:05 CommunityBot 111 silver badge asked Dec 23, 2014 at 7:48 jaa2013jaa2013 24122 gold badges33 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Demo added a class for highlighting effect

$('#newUserId').keypress(function (event) {
    if (event.which == 13)
    {$('#newUserType').addClass("highlght").focus();}
});

http://jsfiddle/o11vowsp/

$('#newUserId').on('keyup', function(e) {
    if ( e.keyCode == 13 )
    $('#newUserType').focus();
});

本文标签： javascriptset the focus to ltselectgt elementStack Overflow