JavaScript＆提交表单＆输入＆设置焦点到下一个元素

我试图在所见即所得的Web设计器10中创建一个简单的提交表单，但我用Enter键有一个大问题。在表单上有几个编辑框，我想要有以下功能（通过JavaScript）： 1.在编辑框中输入密钥不应提交表单。 2.编辑框上的Enter键应将焦点设置到以下元素（编辑框或提交按钮）。 Submit按钮是tabIndex顺序中的最后一个元素。 3.要提交表单，用户必须：或者单击提交按钮，0或在提交按钮具有焦点时按Enter键。 4.必须在任何浏览器中工作。JavaScript＆提交表单＆输入＆设置焦点到下一个元素

这是著作颇丰片段（它设置焦点转移到下一个元素）：

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

我唯一的问题是回车键（键代码）验证，因而应在代码之前改变焦点。我已经在FF 32，PaleMoon 25（FF克隆），Chrome 38 & IE 10中测试过。

非常感谢您的提前。

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

来源

2014-10-31 StreamLine

什么使用TAB键移动到下一个字段时出错？ – 2014-10-31 19:11:47

您意识到采用这种方法会破坏用户熟悉的HTML表单的已建立的用户界面吗？除非你清楚地签署了这个实现*和*用户已经要求它，否则考虑不要这样做。顺便提一下，你确实需要在你的代码片段中添加HTML代码，以便使代码具有任何意义。 – 2014-10-31 19:16:27

@天气风向标：用户一直按Enter键而不是Tab键。 – StreamLine 2014-11-01 05:21:21

我尝试并混合了很多在网络中找到并创建了这一个。到目前为止，它的工作对我来说...只要给它一个尝试

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

希望这将回报你在找什么，即提交进入上提交按钮

来源

2015-04-16 16:58:20

JavaScript＆提交表单＆输入＆设置焦点到下一个元素

回答

相关问题