当键入某个字符时，使用jQuery将光标移动到另一个字段？

Question

我的网页上有两个文本字段。 用户应输入由连字符（“ - ”）字符分隔的两个数字。 数字可以是1到10位数。 当用户按下连字键时，我需要光标移动到下一个字段。

我可以使用$('#txtField2').focus()轻松移动光标。 但是，我仍然遇到连字符仍然在第一个文本字段中的问题。 如何轻松地抑制连字符出现在第一个文本字段中？

Answer 1

HTML

<form>
    <input type='text' class='num' />
    <input type='text' class='num' />
</form>

JavaScript的

$('.num:first').keydown(function (event) {
    // check for hyphen
    if (event.which === 189) {
        event.preventDefault();
        $(this).next('.num').focus();
    }
});

现场演示

Answer 2

假设一个简化的html：

<form action="#" method="post">
    <fieldset>
        <label for="numOne">Number:</label>
        <input type="text" id="numOne" name="numOne" />
        <input type="text" id="numTwo" name="numTwo" />
    </fieldset>
</form>

以下内容应该有效，或作为示例：

$('#numOne').keypress(
    function(e){
        if (e.which == 45) {
            $(this).next('input:text').focus();
            return false; // prevents the '-' being entered.
        }
    });

JS小提琴

顺便说一下，我使用$(this).next('input:text')而不是基于id的选择器来允许更一般的应用和重用。

参考文献：

• keypress() ，
• next() 。

Answer 3

我这样做：

$('#input1').keypress(function(e) {
 if(e.keyCode == 45) {
   e.preventDefault();
   $('#input2').focus();
  }

});

看这里的实例： http ： //jsfiddle.net/wjNP3/2/

Answer 4

你可以“听”那个角色，只关注另一个角色并防止它输入

Answer 5

也许这可以帮助你：

HTML

<div>
  <p>Insert Your Number:</p>
  <input type="number" value="" id="first" >
  <input type="number" value="" id="second" >
  <input type="number" value="" id="third" >
  <input type="submit" id="submit">
</div>

jQuery的

$("#first").on("keypress", function(){
  if($("#first").val().length == 4){
    $("#second").focus();
  }
})

$("#second").on("keypress", function(){
  if($("#second").val().length == 4){
    $("#third").focus();
  }
})

$("#third").on("keypress", function(){
  if($("#third").val().length == 5){
    $("#submit").focus();
  }
})

或者你可以点击这里查看现场演示！