4

我想使用箭头键在表单中的输入文本字段之间导航（下一个，上一个）。我找到了实现它的简单方法：链接到它，但对我来说它不起作用......我也在 FORM 之后的 HEAD 和 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>
4

4 回答 4

4

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

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

进入

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

这样做 keyup 事件将body使用事件委托在元素上捕获

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

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

于 2012-11-06T09:46:27.440 回答
0

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

$('input').live('keyup', function(e) { code here });
于 2012-11-06T09:48:14.330 回答
0

万一您想绑定多个事件，您可以这样做： 

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

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

也'body'可以与任何'input'不会被动态添加到页面的父元素交换（即它在页面加载时存在）。所以如果你有一些div包含 each input，你可能想要绑定它。

于 2012-11-06T10:35:58.083 回答
0

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

为此，您需要使用 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);
    }
    });
于 2014-03-12T11:05:18.190 回答