Question

我试图在WYSIWYG Web Designer 10中创建一个简单的提交表单，但是我对Enter键有一个很大的问题。表单上有几个编辑框，我希望具有以下功能（通过JavaScript）： 1.在编辑框中输入密钥不应提交表格。 2.在编辑框上输入键应将焦点设置为以下元素（编辑框或提交按钮）。提交按钮是tabIndex顺序中的最后一个元素。 3.要提交表单，用户必须：点击提交按钮，或者在提交按钮具有焦点时按Enter键。的 4。必须适用于任何浏览器。

这是一个非常好的片段（它将焦点设置为下一个元素）：

＆＃13;

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

＆＃13;

我唯一的问题是输入密钥（keyCode）验证，它应该在代码之前改变焦点。我一直在测试FF 32，PaleMoon 25（FF克隆），Chrome 38＆amp; IE 10。

非常感谢您提前的时间。

P.S。我是JavaScript的新手。我习惯使用MS Access，在两分钟内解决类似的问题。我花了几个小时完成这个简单的任务，但没有运气。我尝试了很多我在网上找到的例子（包括stackoverflow.com）。对于事件处理（我试图测试keyCode），各种浏览器的行为都不同。

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

这将有希望返回您要查找的内容，即在提交按钮上提交

JavaScript＆amp;提交表格＆amp;输入＆amp;将焦点设置为下一个元素

1 个答案: