Javascript 专注于 JQuery onEnter keypress 的 HTML 元素的下一个 tabindex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10742349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
focus on next tabindex of HTML element onEnter keypress by JQuery
提问by Owais Qureshi
Hi Friends,I'm working on a small task which is to enable the user to tabindex the html element upon enter keypress.
嗨朋友们，我正在做一个小任务，让用户能够在输入按键时对 html 元素进行 tabindex。
As im new to jquery , I have written some code which seems to me that It will work ,but there are some problems in it.
作为 jquery 的新手，我编写了一些代码，在我看来它可以工作，但其中存在一些问题。
Initial findings
The culprit code ,it doesnt work ,as the ouput in the Msg lablel is "Undefined"
初步发现
罪魁祸首代码不起作用，因为 Msg 标签中的输出是“未定义”
$('*').attr('tabindex').id
The code is given below and I have even created a JSFiddle.
下面给出了代码，我什至创建了一个JSFiddle。
JQuery
查询
$(document).ready(function (eOuter) {
$('input').bind('keypress', function (eInner) {
if (eInner.keyCode == 13) //if its a enter key
{
var tabindex = $(this).attr('tabindex');
tabindex++; //increment tabindex
//after increment of tabindex ,make the next element focus
$('*').attr('tabindex', tabindex).focus();
**//Msg Label**
//Just to print some msgs to see everything is working
$('#Msg').text( this.id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
return false; // to cancel out Onenter page postback in asp.net
}
});
}
);
HTML
HTML
<div>
Employee Info<br />
Name<br />
<input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
<br />
Age<br />
<input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
<br />
Gender<br />
<select name="DdlGender" id="DdlGender" tabindex="3">
<option selected="selected" value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<div>
Previous Employment<br />
<select name="DdlCompany" id="DdlCompany" tabindex="4">
<option selected="selected" value="0">Folio3</option>
<option value="1">Null Soft</option>
<option value="2">Object Soft</option>
<option value="3">Excepption Soft</option>
</select>
or Enter Code
<input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
<br />
Address<br />
<input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
<br />
<input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
<br />
<label id="Msg">Message here</label>
</div>
</div>
Let me know where I went wrong :/
让我知道我哪里出错了：/
采纳答案by vansimke
I found a couple of minor jQuery issues. Fixed here: JSFiddle.
我发现了几个小的 jQuery 问题。修正在这里：JSFiddle。
This line:
这一行：
$('*').attr('tabindex', tabindex).focus();
can be written like this:
可以这样写：
$('[tabindex=' + tabindex + ']').focus();
and this:
和这个：
$('#Msg').text($(this).id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
is not calling the id attribute the jQuery way (you are using JavaScript syntax, but the result of $(this) is a jQuery object. So... $(this).idbecomes $(this).attr('id').
不是以 jQuery 方式调用 id 属性（您使用的是 JavaScript 语法，但 $(this) 的结果是一个 jQuery 对象。所以...$(this).id变为$(this).attr('id').
The form still has a submission problem, that I didn't dig too far into, but it changes focus and fills out the '#Msg' element now.
表单仍然存在提交问题，我没有深入研究，但它现在改变了焦点并填写了“#Msg”元素。
回答by eapo
Here is my full working code to focusNextElementon keydown[Enter] withoutjQuerywith JSFiddle examplecreated based on the following stackoverflowanswers:
这是我focusNextElement在keydown[Enter]上的完整工作代码，没有jQuery和基于以下stackoverflow答案创建的JSFiddle 示例：
<script type="text/javascript">
function focusNextElement() {
var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
if (document.activeElement && document.activeElement.form) {
var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
function(element) {
return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
});
var index = focussable.indexOf(document.activeElement);
focussable[index + 1].focus();
}
}
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
e.preventDefault();
focusNextElement();
return false;
}
}
}, true);
</script>
回答by karlisup
Didn't want to make new post and make SPAM with solution I found useful.
不想发布新帖子并使用我发现有用的解决方案制作垃圾邮件。
Collected information from other sources (Brian Glaz codenice-one) and made cross-browser version of Focus Next Element In Tab-indexusing Enterkey.
从其他来源收集信息（Brian Glaz 代码不错），并 使用Enter键制作了跨浏览器版本的Focus Next Element In Tab-index。
Tab-indexesare not one after another, but may also contain a space between (1,2,9,11,30,etc.)
标签的索引是不一个接一个，但也可以含有之间的空间（1,2,9,11,30等）
var tabindex = 1; //start tabindex || 150 is last tabindex
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13') { //onEnter
tabindex++;
//while element exist or it's readonly and tabindex not reached max do
while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
tabindex++;
}
if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
$("[TabIndex='"+tabindex+"']").focus()
return false;
}
});
$("input").click(function() { //if changing field manualy with click - reset tabindex
var input = $(this);
tabindex = input.attr("tabindex");
})
I hope that someone will find it useful. Feel free to edit/comment it.
我希望有人会觉得它有用。随意编辑/评论它。
回答by Ana El Bembo
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
回答by J?rg Henke
Seeking for a solution for exactly this problem, I generated a small jquery function to find the next valid tabindex; suppose it's a bit easier to maintenance and maybe a bit faster than a while loop:
为了解决这个问题，我生成了一个小的 jquery 函数来查找下一个有效的 tabindex；假设它更容易维护，并且可能比 while 循环快一点：
function getNextTabindex(currentTabIndex) {
return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}
Hope this to be helpful to whoever needs it; this is tested and works.
希望这对需要它的人有所帮助；这是经过测试并有效的。
Explaning this in short: seek for the element of the current tabindex, find this element in the list of all tabindex elements, get the index of it and increase the index.
简而言之：寻找当前tabindex的元素，在所有tabindex元素的列表中找到这个元素，得到它的索引并增加索引。
Then, using this function, you may select the next tabindex element that way:
然后，使用此函数，您可以通过以下方式选择下一个 tabindex 元素：
$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();
I didn't test the call but suppose it to work.
我没有测试电话，但假设它可以工作。
回答by Hossein Hajizadeh
var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();
sample for Editable cells in table
表格中可编辑单元格的示例
$(document).on('dblclick', 'td', function () {
console.log('clicked');
this.contentEditable = 'true';
});
$(document).on('keydown', 'td', function (event) {
if (event.keyCode === 9 || event.keyCode === 13) {
this.contentEditable = 'false';
// $(this).next().focus().dblclick().focus();
var tabindex = $(this).attr('tabindex');
tabindex++;
var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
if (next.is('td') == false)
return true;
var sel, range;
if (window.getSelection && document.createRange) {
range = document.createRange();
range.selectNodeContents(next[0]);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(next[0]);
range.collapse(true);
range.select();
}
return false;
}
});
