无法使用keyUp

时间:2016-02-15 00:46:59

标签: javascript jquery html

我正在尝试进行一系列文本输入,当达到maxLength时,焦点会更改为keyUp上的下一个输入,我可以这样做,但我遇到的问题是当文本输入在表格内时我不能得到焦点,以改变下一个单元格中的输入。

以下是我正在使用的代码:

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type='text/javascript'>

$(document).ready(function(){
    $('.inputField').keyup(function () {
        if (this.value.length == this.maxLength) {
            $(this).next('.inputField').focus();
        }
    });
});
</script>
</head>
<body>

<table>
    <td><input type="text" maxlength="1" class="inputField" /></td>
    <td><input type="text" maxlength="1" class="inputField" /></td>
    <td><input type="text" maxlength="1" class="inputField" /></td>
<table>

</body>
</html>

https://jsfiddle.net/jzgs6wmn/

我已经尝试将('。inputField')更改为('input')和('input.inputField')并且我也试过给表一个类然后使用表类来获取输入,但是任何组合我试过的路径不会改变焦点所以我不确定在访问表格中的输入标签时我的意思是什么。

1 个答案:

答案 0 :(得分:0)

由于输入位于 td 标记内,因此您必须首先引用父级,然后执行下一步并找到具有您要查找的类的子级。

$(document).ready(function(){
    $('.inputField').keyup(function () {
    if (this.value.length == this.maxLength) {
        $(this).parent().next().find('.inputField').focus();
    }
  });
});