JavaScript 并将表单提交到 Enter 并将焦点设置到下一个元素答案

【问题标题】：JavaScript & submit form & Enter & set focus to next elementJavaScript 并将表单提交到 Enter 并将焦点设置到下一个元素
【发布时间】：2014-10-31 19:08:08
【问题描述】：

我正在尝试在 WYSIWYG Web Designer 10 中创建一个简单的提交表单，但我在使用 Enter 键时遇到了一个大问题。表单上有几个编辑框，我希望具有以下功能（通过 JavaScript）： 1. Edit Box 上的 Enter 键不应该提交表单。 2. 编辑框上的 Enter 键应将焦点设置为以下元素（编辑框或提交按钮）。提交按钮是 tabIndex 顺序中的最后一个元素。 3. 要提交表单，用户必须：要么点击提交按钮，或在提交按钮获得焦点时按 Enter。 4。必须在任何浏览器中工作。

这是一个运行良好的 sn-p（它将焦点设置到下一个元素）：

      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();
          }

我唯一的问题是输入键（keyCode）验证，它应该在代码之前更改焦点。我一直在 FF 32、PaleMoon 25（FF 克隆）、Chrome 38 和 IE 10 中进行测试。

非常感谢您提前抽出时间。

附：我是 JavaScript 的新手。我曾经与 MS Access 一起工作，类似的问题会在两分钟内得到解决。我在这个简单的任务上花了几个小时，但没有运气。我已经尝试了很多我在网上找到的例子（包括 stackoverflow.com）。至于 event 处理（我正在尝试测试 keyCode），各种浏览器的行为不同。

【问题讨论】：

使用TAB键移动到下一个字段有什么问题？
您意识到采用这种方法会破坏您的用户已经熟悉的 HTML 表单的既定用户界面吗？除非您明确签署此实现并且用户要求它，否则请考虑不要这样做。顺便说一句，您确实需要将 HTML 添加到您的 sn-p 以使该代码以任何方式有意义。
@Weather Vane：用户一直按 Enter 而不是 Tab。
@David Thomas：是的，我想改变表单的行为。不仅是我 - 有很多线程在讨论同一个问题。 IE。应该有一个工具来改变 Enter 行为......只是用 9 替换 13。
经过一番探索：Firefox & PaleMoon 无法处理事件。 Chrome、IE、Opera 和 Safari 工作正常。如何处理 Firefox 及其克隆中的事件？

标签： javascript submit enter setfocus submit-button

【解决方案1】：

我尝试并混合了很多在网络上找到的东西并创建了这个。到目前为止它对我有用......试试吧

$(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"]')

这有望返回您正在寻找的内容，即在提交按钮上输入时提交

【讨论】：