如何捕捉與JS的HTML表單上的所有擊鍵？

當遊標位於表單內部時，是否有辦法捕獲所有擊鍵？我需要檢測一個ENTER命中，然後模擬TAB命中（光標跳轉到下一個表單元素）。爲什麼？人們（會計師）只需用數字鍵盤就可以用一隻手輸入數據。如何捕捉與JS的HTML表單上的所有擊鍵？

2012-12-03 user1517081

如果你設計你的表格，標籤將自動進入下一個輸入元素。您還可以設置「tabindex」來確定排序。請參閱http://reference.sitepoint.com/html/a/tabindex – peacemaker

@peacemaker：我不認爲這是這裏的問題...他想在用戶點擊NUMPAD ENTER鍵時模擬TAB。 –

@FrancisP呵呵，我誤解了OP的要求。 – peacemaker

如果你的腳本使用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">

，按下後的第一次提出回車鍵 - 焦點將被傳遞給第二個。

來源

2012-12-03 19:17:24

這是我用來模擬「Enter」鍵的行爲，如「TAB」鍵碼，而在asp.net格：

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')），但我相信您可以根據自己的需要進行調整。

我atteched js的功能，我的文本框的onKeyDown事件：

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

來源

2012-12-03 19:17:58

使用jQuery你可以模擬一個TAB（鍵碼9）當ENTER（鍵代碼爲13）使用這樣的壓：

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

來源

2012-12-03 19:18:56 peacemaker

這裏是一些模擬表單中的選項卡的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); 
});

來源

2012-12-03 19:40:54 David

如何捕捉與JS的HTML表單上的所有擊鍵？

回答

相關問題