Question

我想使用箭头键在我的表单中的输入文本字段之间导航（下一个，上一个）。我找到了这个简单的方法来实现它：link to it但是对我来说它不起作用......我在HEAD之后以及在FORM之后的BODY中尝试过它，但没有运气......

我认为问题可能是，我的表单是通过AJAX发送回页面的......

我对jQuery并不熟悉，有人可以帮助我吗？

这是jQuery代码：

<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>

Answer 1

如果您的输入是在domready事件后动态创建的，则应更改

$('input').keyup(function(e){
   ...

到

$('body').on('keyup', 'input', function(e) {
   ...

这样做的keyup事件将使用事件委托

在body元素上捕获

有关详细信息，请参阅此处的文档：http://api.jquery.com/on/

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序...

Answer 2

如果您的脚本在表单在页面上之前加载，则keyup绑定将无法在加载时绑定。尝试使用：

$('input').live('keyup', function(e) { code here });

Answer 3

如果你想绑定多个事件，你就是这样做的：

$('body').on({
    'keyup' : function(e) {
        ...
    },

    'keydown' : function(e) {
        ...
    }
}, 'input');

同样'body'可以与任何不会动态添加到页面的'input'父元素交换（即它在页面加载时存在）。因此，如果您有一些div包含每个input，您可能希望将其绑定。

Answer 4

我对上面的代码略有改进。代码的问题是您无法在输入字段内导航。例如。您的值为＆＃39; 100.00 |＆＃39;光标当前在末尾（用|表示）。如果按左键，它将跳转到prev输入字段，而不是将插入符移动一个位置到＆＃39; 100.0 | 0＆＃39;。

为此，您需要使用e.target.selectionStart检查当前插入位置。但是你也需要prev插入符号位置，否则你无法识别插入符号从1到0（没有跳转）或插入符号是否已经为0并且用户再次向左按下（跳转）。

我添加的另一个变化是只考虑类tableInput的输入字段。如果您想要排除某些字段。

function(e){
        var charPos = e.target.selectionStart;
    var strLength = e.target.value.length;
    var prevPos = $(this).data('prevPos');
    if(e.which==39){
                //only go right if we really reached the end, that means the prev pos is the same then the current pos
        if(charPos==strLength && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').next().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==37){
//only go left if we really reached the beginning, that means the prev pos is the same then the current pos
        if(charPos == 0 && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').prev().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==40){
        $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);

    }else if(e.which==38){
        $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);
    }
    });

使用箭头键在表单中使用箭头键跳转到下一个输入字段

4 个答案: