嗨朋友们, 我正在执行一项小任务,使用户能够在输入按键时对 html 元素进行 tabindex。
由于我是jquery新手,我编写了一些代码,在我看来它会起作用,但其中存在一些问题。
初步发现
罪魁祸首代码,它不起作用,因为消息标签中的输出是“未定义”
$('*').attr('tabindex').id
代码如下,我什至创建了一个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
<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>
让我知道我错在哪里:/
我发现了几个 jQuery 小问题。此处修复:JSFiddle。
这一行:
$('*').attr('tabindex', tabindex).focus();
可以这样写:
$('[tabindex=' + tabindex + ']').focus();
还有这个:
$('#Msg').text($(this).id + " tabindex: " + tabindex
+ " next element: " + $('*').attr('tabindex').id);
不是以 jQuery 方式调用 id 属性(您使用的是 JavaScript 语法,但 $(this) 的结果是一个 jQuery 对象。所以...
$(this).id
变为 $(this).attr('id')
。
表单仍然存在提交问题,我没有深入研究,但它现在改变了焦点并填写了“#Msg”元素。
这是我在
focusNextElement
上的完整工作代码 keydown
[Enter] without jQuery with JSFiddle example 基于以下 stackoverflow 答案创建:
<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>
不想发表新帖子并使用我发现有用的解决方案制作垃圾邮件。
从其他来源收集信息(Brian Glaz代码nice-one)并使用Enter键制作了在Tab-index中聚焦下一个元素的跨浏览器版本。
制表符索引不是一个接一个,但也可能在(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");
})
我希望有人会觉得它有用。 欢迎编辑/评论。
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
为了寻找解决这个问题的方法,我生成了一个小的 jquery 函数来查找下一个有效的 tabindex;假设它比 while 循环更容易维护,并且可能更快一点:
function getNextTabindex(currentTabIndex) {
return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}
希望对有需要的人有所帮助;这是经过测试并且有效的。
简单解释一下:寻找当前tabindex的元素,在所有tabindex元素的列表中找到该元素,获取它的索引并增加索引。
然后,使用此功能,您可以这样选择下一个 tabindex 元素:
$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();
我没有测试该通话,但认为它可以工作。
var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();
表格中可编辑单元格的示例
$(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;
}
});