JavaScript＆提交表單＆輸入＆將焦點設置到下一個元素

Question

我正在嘗試在WYSIWYG Web Designer 10中創建一個簡單的提交表單，但是Enter鍵有一個大問題。 表單上有幾個編輯框，我希望具有以下功能（通過JavaScript）：1.在“編輯框”上輸入Enter鍵不應該提交表單。 2.在“編輯框”上的Enter鍵應將焦點設置為以下元素（編​​輯框或提交按鈕）。 提交按鈕是tabIndex順序中的最后一個元素。 3.要提交表單，用戶必須：單擊提交按鈕，或者在提交按鈕具有焦點時按Enter。 4.必須在任何瀏覽器中均可使用。

這是一個效果很好的代碼片段（它將焦點設置到下一個元素）：

  var elem = document.activeElement; var tidx = +(elem.getAttribute('tabindex')) +1, elems = document.getElementsByTagName('input'); for (var i=elems.length; i--;) { var tidx2 = elems[i].getAttribute('tabindex'); if (tidx2 == tidx) elems[i].focus(); } 

我唯一的問題是Enter鍵（keyCode）驗證，該驗證應在代碼之前更改焦點。 我正在FF 32，PaleMoon 25（FF克隆），Chrome 38和IE 10中進行測試。

非常感謝您提前抽出寶貴的時間。

PS我是JavaScript的新手。 我曾經使用過MS Access，在兩分鍾之內可以解決類似的問題。 我已經花了幾個小時完成這項簡單的任務，但是沒有運氣。 我嘗試了很多在Web上找到的示例（包括stackoverflow.com）。 至於事件處理（我正在嘗試測試keyCode），各種瀏覽器的行為都不同。

Answer 1

我嘗試並混合了很多在Web中找到的內容，並創建了這個。 到目前為止，它對我有用...試試看

$(document).on('keypress', 'input, select, checkbox, radio, button', function (e) {
    return focusNextOnEnter(e, this);
})

以及JS文件中某處的函數。

 function focusNextOnEnter(e, selector) {
    var longSelector = 'input:visible:enabled:not([readonly="readonly"]), textarea:visible:enabled:not([readonly="readonly"]), select:visible:enabled, button:visible:enabled';
    var keyCode = e.keyCode || e.which;
    if ($(selector).is(':not(textarea)')  // it's not a textarea - enter in text area
            && keyCode === 13 // it's enter key
            && !($(selector).attr('id') === 'submitButton')) // it's not submitButton, save-on-enter here
    {
        e.preventDefault();
        $(longSelector)[$(longSelector).index($(selector)) + 1].focus();
        return true;
    }
}

而不是最后一次檢查

$(selector).attr('id') === 'submitButton'

您可以隨時檢查

$(selector).is('[type="submit"]')

希望這將返回您要查找的內容，即在“提交”按鈕上提交