如何从 tabindex 流程中删除浏览器功能?
How to remove browsers functions from tabindex flow?
我已经为我的 JSP 页面中的所有元素设置了选项卡索引,它工作正常,但在选项卡索引流中,浏览器的功能也得到了关注。
示例:
当标签焦点放在我的页面的最后一个元素上时,如果我再次击中选项卡,则焦点将转到浏览器的地址栏,刷新按钮,tab window和主页按钮。
我希望焦点应该在最后一个标签索引为 10 之后标签索引为 1 的第一个元素上。
如何限制这些浏览器功能的标签聚焦。我正在使用 Javascript/JQuery 和 IE 9.
以下是我的页面:
<html>
<body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//functions
});
</script>
<div id="xyz">
<ul >
<li>
<div>
<input type="text" maxlength="30" tabindex = "1" />
<br>
<input type="text" maxlength="30" tabindex = "2" />
<br>
</div>
</li>
</ul>
<ul>
<li>
<div>
<input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
</div>
<div>
<input type="checkbox" id="checkBox2" value="false" tabindex ="4"/>
</div>
</li>
<li>
<div>
<input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex ="5"/>
</div>
<div>
<input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex ="6"/>
</div>
</li>
</ul>
</div>
</body>
</html>
如果当前焦点是最后一个元素,您可以使用下面的脚本来聚焦第一个元素。
<input id="firstElement" value="" />
<!---series of dom element-->
<input id="lastElement" value="" />
<script>
$('#lastElement').keydown(function(e) {
if (e.keyCode == 9) {
$('#firstElement').focus();
e.preventDefault();
}
});
</script>
您可以将 keydown
事件与 .index()
和 .length
结合使用,检查:
$('#xyz').find(':input').last().keydown(function(e) {
if ($(this).attr('tabindex') == $('#xyz').find(':input').length) {
if (e.keyCode === 9) {
e.preventDefault();
$('input[type="text"]').first().trigger('focus');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xyz">
<ul>
<li>
<div>
<input type="text" maxlength="30" tabindex="1" />
<br>
<input type="text" maxlength="30" tabindex="2" />
<br>
</div>
</li>
</ul>
<ul>
<li>
<div>
<input type="checkbox" id="checkBox1" value="false" tabindex="3" />
</div>
<div>
<input type="checkbox" id="checkBox2" value="false" tabindex="4" />
</div>
</li>
<li>
<div>
<input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex="5" />
</div>
<div>
<input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex="6" />
</div>
</li>
</ul>
</div>
我已经为我的 JSP 页面中的所有元素设置了选项卡索引,它工作正常,但在选项卡索引流中,浏览器的功能也得到了关注。
示例: 当标签焦点放在我的页面的最后一个元素上时,如果我再次击中选项卡,则焦点将转到浏览器的地址栏,刷新按钮,tab window和主页按钮。
我希望焦点应该在最后一个标签索引为 10 之后标签索引为 1 的第一个元素上。
如何限制这些浏览器功能的标签聚焦。我正在使用 Javascript/JQuery 和 IE 9.
以下是我的页面:
<html>
<body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//functions
});
</script>
<div id="xyz">
<ul >
<li>
<div>
<input type="text" maxlength="30" tabindex = "1" />
<br>
<input type="text" maxlength="30" tabindex = "2" />
<br>
</div>
</li>
</ul>
<ul>
<li>
<div>
<input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
</div>
<div>
<input type="checkbox" id="checkBox2" value="false" tabindex ="4"/>
</div>
</li>
<li>
<div>
<input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex ="5"/>
</div>
<div>
<input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex ="6"/>
</div>
</li>
</ul>
</div>
</body>
</html>
如果当前焦点是最后一个元素,您可以使用下面的脚本来聚焦第一个元素。
<input id="firstElement" value="" />
<!---series of dom element-->
<input id="lastElement" value="" />
<script>
$('#lastElement').keydown(function(e) {
if (e.keyCode == 9) {
$('#firstElement').focus();
e.preventDefault();
}
});
</script>
您可以将 keydown
事件与 .index()
和 .length
结合使用,检查:
$('#xyz').find(':input').last().keydown(function(e) {
if ($(this).attr('tabindex') == $('#xyz').find(':input').length) {
if (e.keyCode === 9) {
e.preventDefault();
$('input[type="text"]').first().trigger('focus');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xyz">
<ul>
<li>
<div>
<input type="text" maxlength="30" tabindex="1" />
<br>
<input type="text" maxlength="30" tabindex="2" />
<br>
</div>
</li>
</ul>
<ul>
<li>
<div>
<input type="checkbox" id="checkBox1" value="false" tabindex="3" />
</div>
<div>
<input type="checkbox" id="checkBox2" value="false" tabindex="4" />
</div>
</li>
<li>
<div>
<input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex="5" />
</div>
<div>
<input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex="6" />
</div>
</li>
</ul>
</div>