CODEWITHSUNDEEP
javascriptjqueryhtml
Doncho
Doncho

Reputation: 41

Switch text field on enter press

No answers that I have found online have worked.

When my page loads, I have my JS file select the first textfield; which works. I then want it so that if the enter key is pressed while in a textfield it then proceeds to the next textfield. Right now I have...

$('input[type="text"]').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
});

which doesn't work.

and my inputs are...

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />

I apologize if I've done something dumb, but I've been trying to figure this out for far too long.

Upvotes: 2

Views: 877

Answers (7)

bibliophilsagar
bibliophilsagar

Reputation: 1753

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />

1. First change your e.keyCode to e.which

$(document).ready(function(){
    $('input[type="text"]').keypress(function(e) {
      if(e.which == 13) {
         $(this).next().focus();
      }
    }); 
});
  1. Check whether you have jquery in your html or not.
  2. It may be possible that your html that you have provided is enclosed in a form with a submit button. If so then even if you have provided your keyup event, your form will submit. That's why you are not seeing the result.
  3. password should be type = password. Just a advice outside your query.

Upvotes: 0

MH2K9
MH2K9

Reputation: 12039

You just need to point your code snippet inside document ready function. Like below

$(document).ready(function (){
     $('input[type="text"]').keyup(function(e) {
          var key_code = e.keyCode || e.which;
          if(key_code == 13)
          {
              $(this).nextAll('input[type="text"]').first().focus();
          }
     });
 });

To be conscious suggest to use nextAll('input[type="text"]').first().focus() if there have any other DOM before second text input field.

Upvotes: 2

Noman
Noman

Reputation: 4116

Use input selector with jQuery below code will work for input type="text", input type="password" also for <select> tags..

See online JS Fiddle. HTML:

<input type="text" name="username" id="username" autocomplete="off" />
<input type="password" name="password" id="password" autocomplete="off" />
<select style="width:100px">
<option>A</option>
<option>b</option>
<input type="text" name="text2" id="text2" autocomplete="off" />
</select>
</select>

JS:

$(document).ready(function(){
  $('input:first , select').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
  });
});

Upvotes: 0

Raghvendra Kumar
Raghvendra Kumar

Reputation: 1388

Please try this : 

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />


$('input[type="text"]').keypress(function(e) {
  if(e.which == 13) {
     $(this).next().focus();
  }
});

Upvotes: 0

Ali Mehdi
Ali Mehdi

Reputation: 924

Here is html

<input type="text" name="username" id="username" autocomplete="off" data-selected="true" />
<input type="text" name="password" id="password" autocomplete="off" data-selected="false" />

Here is JS

$('input[type="text"]').keyup(function (e) {
    if (e.keyCode == 13) {
    $('[data-selected=false]').focus();
    $('[data-selected=false]').attr('data-selected', true);
    $(this).attr('data-selected', false);
    }
});

Here is fiddle

https://jsfiddle.net/tm8yxL1m/

Explanation:

I have used data-selected="true" to check whether the field is selected. When user presses enter. I manipulate it to false and make other true

Upvotes: 0

Joyson
Joyson

Reputation: 380

Your code works fine make sure there is any error thrown in your browser console.

$(document).ready(function(){

 $('input[type="text"]').keyup(function(e) {
  if(e.keyCode == 13) {
   $(this).next().focus();
  }
 });
});

Upvotes: 0

Indrasis Datta
Indrasis Datta

Reputation: 8618

You should check if there's some script error. On Chrome, Press Ctrl + Shift + J.

Just add autofocus HTML attribute to the first input field.

Your password should be made input type password.

<input type="text" name="username" id="username" autocomplete="off" autofocus />

<input type="password" name="password" id="password" autocomplete="off" />

Upvotes: 0

Related Questions