Bewegen Cursor zum nächsten Text Feld drücken Enter

Ich habe mehrere Textfelder in meinem Formular und ich möchte, wenn Benutzer Daten in einem Textfeld eingibt und drücken Sie die Eingabetaste, der Cursor bewegt sich in ein anderes Textfeld neben dem aktuellen Textfeld. Ich habe einige Fragen besucht, fand sie aber nicht nützlich.Bewegen Cursor zum nächsten Text Feld drücken Enter

$("#username").keypress(function (event) { 
    alert("inside function"); 
    if(event.keyCode == 13) { 
     textboxes = $("input.username"); 
     debugger; 
     currentBoxNumber = textboxes.index(this); 
     if (textboxes[currentBoxNumber + 1] != null) { 
      nextBox = textboxes[currentBoxNumber + 1]; 
      nextBox.focus(); 
      nextBox.select(); 
      event.preventDefault(); 
      return false; 
     } 
    } 
});

dies ist mein Code, die ich versucht habe eine andere Sache, dass, wenn die in den letzten Textfeld eingegebenen Daten dann das Formular auf Mausklick auf den Absenden-Button wird nicht mit drücken Sie die Eingabetaste.

Quelle

2014-04-04 Engineer

@Teemu nicht i müde :( – Engineer

Dies sollte funktionieren einreichen:

$(".username").keyup(function (event) { 
    if (event.keyCode == 13) { 
     textboxes = $("input.username"); 
     currentBoxNumber = textboxes.index(this); 
     if (textboxes[currentBoxNumber + 1] != null) { 
      nextBox = textboxes[currentBoxNumber + 1]; 
      nextBox.focus(); 
      nextBox.select(); 
     } 
     event.preventDefault(); 
     return false; 
    } 
});

ENTER löst nicht keypress in allen Browsern aus, stattdessen keyup verwendet. EventListener an jedem input anstelle eines Wrappers angehängt.

A live demo at jsFiddle.

Ihr Code mit Ereignisse Delegation wird auch mit einer leichten Veränderung arbeiten:

currentBoxNumber = textboxes.index(event.target);

this auf dem oberen Satz die Verpackung anstelle der input beziehen würde, bezieht sie event.target das eigentliche Element, das das Ereignis ausgelöst.

A live demo at jsFiddle.

Quelle

2014-04-04 04:52:51 Teemu

Ihre js Code arbeiten und Geige arbeitet, aber ich möchte auch, dass meine Form vorlegen wird nicht auf der Taste beacue eingeben, wenn ich drücke auf Enter-Taste zur nächsten bewegen textfield mein Formular wird reichen, wie ich das verhindern werde – Engineer

Gib 'false' aus dem keyup-Handler in jedem Fall von ENTER zurück.Siehe die Editierung. – Teemu

Ich habe es gerade in Firefox 44.0 unter Linux versucht und festgestellt, dass die Formularübergabe dort ausgelöst wird keydown, was bedeutet, dass das submission-Ereignis ausgelöst wird, bevor das keyup-Ereignis, das den Fokus auf das nächste Feld erhöht, eine Chance hat. Die Änderung von keydown zu keydown hat das Problem behoben. Noch keine weiteren browserübergreifenden Tests durchgeführt. –

Versuchen Sie dies, sobald sie gedrückt wird in der Form zum nächsten Eingabefeld zu bewegen, und wenn es Absenden-Button erreicht wird sie die Form

  <html> 
    <head> 
     <title></title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type='text/javascript'> 
     $(document).ready(function(){ 
      $('#myForm input').keydown(function(e){ 
      if(e.keyCode==13){  

       if($(':input:eq(' + ($(':input').index(this) + 1) + ')').attr('type')=='submit'){// check for submit button and submit form on enter press 
       return true; 
       } 

       $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus(); 

       return false; 
      } 

      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <form action="" id="myForm" > 
     <input type='text' name='firstField'> 
      <input type='text' name='secondField'> 

      <input type='text' name='secondField'> 

      <input type='text' name='secondField'> 
     <input type='submit'> 
     </form> 
    </body> 
    </html>

Quelle

2014-04-04 04:52:31 sanjeev

$(document).ready(function() { 

    $('input:text:first').focus(); 

    $('#txtLoginID').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtLoginID').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtPassword').focus(); 

      } 
     } 
    }); 


    $('#txtPassword').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtPassword').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtFirstName').focus(); 

      } 
     } 
    }); 

    $('#txtFirstName').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtFirstName').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtLastName').focus(); 

      } 
     } 
    }); 

    $('#txtLastName').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtLastName').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtPhoneNo').focus(); 

      } 
     } 
    }); 


    $('#txtPhoneNo').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtPhoneNo').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtEmailID').focus(); 

      } 
     } 
    }); 

    $('#txtEmailID').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtEmailID').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtAddress').focus(); 

      } 
     } 
    }); 

    $('#txtAddress').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtAddress').val() == "") { 
       return false; 
      } 
      else { 
       $('#btnSignUp').focus(); 

      } 
     } 
    }); 

you can do for text ,password,textarea its a long process but no confusion

Quelle

2017-02-22 09:03:15

**This code was perfectly worked in cursor move to next contenteditable td and textboxes and dropdown list within td ,and datepicker within textbox by reference in class strong text** 

    `var $input = $('.EnterlikeTab'); 
     $input.bind('keydown', function (e) { 
      if (e.which == 13) { 
       e.preventDefault(); 
       var nxtIdex = $input.index(this) + 1; 
       $(".EnterlikeTab:eq(" + nxtIdex + ")").focus(); 
      } 
     });`

Quelle

2017-07-15 13:01:58

Bewegen Cursor zum nächsten Text Feld drücken Enter

Antwort

Verwandte Themen