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

I want to use the arrow keys to navigate between the input text fields in my form (next, previous). I found this simple method to implement it: link to it but for me it doesn't work... I tried it in the HEAD and in the BODY after the FORM as well, but no luck...

我想使用箭头键在我的表单中的输入文本字段之间导航(下一个,上一个)。我找到了这个简单的方法来实现它:链接到它但对我来说它不起作用...我在HEAD和在THE之后的BODY中尝试过它,但没有运气......

I think the problem could be, that my form is send back to the page via AJAX...

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

I'm not that familiar with jQuery, can someone please help me out here?

我对jQuery并不熟悉,有人可以帮帮我吗?

This is the jQuery code:

这是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 个解决方案

#1

if your inputs are dynamically created after domready event you should change

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

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

into

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

doing so the keyup event will be captured on body element using event delegation

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

For further info see the documentation here: http://api.jquery.com/on/

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

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler...

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

#2

If your script is loaded before the form is on the page then the keyup binding would not be able to bind on load. Try using:

如果在表单在页面上之前加载了脚本,那么keyup绑定将无法在加载时绑定。尝试使用:

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

#3

Just in case you want to bind more than one event, this is how you do it:

如果您想要绑定多个事件,请按以下步骤操作:

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

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

Also 'body' can be swapped with any parent element of 'input' that will not be dynamically added to the page (i.e. it exists on page load). So if you have some div containing each input, you might want to bind that instead.

此外,'body'可以与任何不会动态添加到页面的'input'的父元素交换(即它存在于页面加载中)。因此,如果您有一些包含每个输入的div,您可能希望将其绑定。

#4

I've got a slight improvement to the code above. The problem with the code is that you cannot navigate inside an input field. E.g. you have a value of '100.00|' with the cursor currently at the end (indicated with |). If you press the left key it will jump to the prev input field instead of moving the caret by one position to '100.0|0'.

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

In order to do that you need to check the current caret position with e.target.selectionStart. But you also need the prev caret position as otherwise you can't identify whether the caret went from 1 to 0 (no jump) or the caret was already on 0 and the user pressed left again (jump).

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

Another change I've added is that only input fields with the class tableInput are considered. In case you want to exclude some fields.

我添加的另一个更改是仅考虑具有类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);
    }
    });

#1