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来处理类似的问题将在两分钟内解决。 我已经花了几个小时在这个简单的任务,但没有运气。我尝试了很多我在网上找到的例子(包括*.com)。至于事件处理(我试图测试keyCode)各种浏览器的行为不同。
答
我尝试并混合了很多在网络中找到并创建了这一个。 到目前为止,它的工作对我来说...只要给它一个尝试
$(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"]')
希望这将回报你在找什么,即提交进入上提交按钮
什么使用TAB键移动到下一个字段时出错? – 2014-10-31 19:11:47
您意识到采用这种方法会破坏用户熟悉的HTML表单的已建立的用户界面吗?除非你清楚地签署了这个实现*和*用户已经要求它,否则考虑不要这样做。顺便提一下,你确实需要在你的代码片段中添加HTML代码,以便使代码具有任何意义。 – 2014-10-31 19:16:27
@天气风向标:用户一直按Enter键而不是Tab键。 – StreamLine 2014-11-01 05:21:21