Question

当光标位于表单内时，是否有办法捕获所有击键。我需要检测一个ENTER命中，然后模拟一个TAB命中（光标跳转到下一个表单元素）。为什么？人员（会计师）只需使用数字键盘，就可以用一只手输入数据。

Answer 1

这是我在asp.net网格中用来模拟“Enter”键的代码，就像“TAB”键一样：

function handleEnter (field, event) {
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (keyCode == 13) {
        var i;
        for (i = 0; i < field.form.elements.length; i++){
            if (field == field.form.elements[i]) //Find the control's index
                break;
        }
        i++; // Go to next control index
        var precField = field.form.elements[i];

        if (precField.type == 'text') {
            if (field.form.elements[i+1].type == 'hidden' && field.form.elements[i + 2].type!='submit')
                handleEnter(field.form.elements[i + 1], event);
            else
                precField.focus();
        }
        else if (precField.type != 'hidden')
            handleEnter(precField, event);

        return false;
    } 
    else
        return true;
}

正如您所看到的，它只是从1个文本字段转到另一个文本字段（if (precField.type == 'text')），但我相信您将能够根据需要进行调整。

我将js函数应用于TextBoxes的OnKeyDown事件：

<asp:TextBox ID="txtP1s" runat="server" OnKeyDown='return handleEnter(this, event);'></asp:TextBox>

Answer 2

这是一些模拟表单中的选项卡的jQuery。您需要以相同的形式获取所有:input元素，然后遍历。它也适用于:input捕获的复选框和任何其他表单元素。

DEMO：http://jsfiddle.net/hbV5b/

var onkey = function(e) {
    if ( e.which == 13 ) {
        e.preventDefault();
        var index = -1,
            el = this,
            $forms = $(this).closest('form').find(':input').each(function(i) {
                if( this === el ) {
                    index = i+1;
                    return false;
                }
            });
        index < $forms.length ? $forms[index].focus() : $(el).blur()
    }
};
// attach/detach the handler
$(':input').focus(function() {
    $(this).keypress(onkey);
}).blur(function() {
    $(this).unbind('keypress', onkey);
});

Answer 3

如果您的脚本使用jQuery，那么：

var form = $('someForm');

form.find(':text').on('keyup', function(e) {
    if (e.which === 13){
       form.find(':text[tabindex = ' + (+$(this).prop('tabindex') + 1) + ']').trigger('focus');
    }
});

此代码需要每个字段的tabindex属性。例如：

第一栏：

<input type="text" tabindex="1">

第二栏：

<input type="text" tabindex="2">

在第一个字段中按Enter键后，焦点将传递给第二个字段。

Answer 4

使用JQuery，您可以使用以下内容按下ENTER（键代码13）来模拟TAB（键代码9）：

$(".input").keyup(function (e) {
    if (e.keyCode == 13) {
      jQuery.event.trigger({ type : 'keypress', which : 9 });
    }
});

如何使用JS捕获html表单上的所有击键？

4 个答案: