我在文本框旁边有2个按钮,在2个按钮后面有另一个文本框。第一个文本框的tabindex为1000,第一个按钮为1001,第二个按钮为1002.第二个文本框的tabindex为1003。
当我按Tab键时,tabindex在除Safari之外的所有浏览器中都能正常工作,尽管tabindex已正确设置,但它会立即从第一个文本框移动到第二个文本框。关于如何防止这个问题的任何想法?
答案 0 :(得分:127)
默认情况下,在Safari(!)中禁用了tab-access。要启用它,请选中“首选项>高级>按标签以突出显示页面上的每个项目”。
答案 1 :(得分:8)
使Safari和Mac可以访问:
在Mac上测试: 系统偏好设置 - >键盘 - >快捷方式(标签) - >全键盘访问 - >所有控制
Tabbing可以在Safari上使用: 偏好 - >高级 - >按Tab键突出显示页面上的每个项目(选中此项)
答案 2 :(得分:5)
我在Safari 5.1.5中尝试了以下操作。我不知道它如何适用于旧版本:
当“突出显示页面上的每个项目”(请参阅icondivine的回答)被禁用时,您可以通过按Option(alt)+选项卡来使用该功能。
如果你没有(并且该选项被禁用),Safari将默认选项卡通过所有表单字段(如input,textarea,select ...)。对于此字段,它还将接受/考虑tabindex。它将首先使用tabindex(按给定索引的顺序)选中所有表单元素,然后按照HTML中定义的顺序浏览其余表单元素。
因此,如果为两个输入元素定义tabindex =“1”(或1001)和“3”(或1003),Safari将首先关注这些字段,然后关注其他字段。
答案 3 :(得分:5)
如果您正在编写自己的网页,我会修补一些jquery / javascript的内容。这就是我在我的用法。
缺点是您要阻止页面上的默认Tab键行为,这在某些情况下可能会成为更大的可访问性问题。但我对此表示怀疑。
var Tab = {};
Tab.i = 1,
Tab.items = 0;
function fixTabulation () {
/* This can be used to auto-assign tab-indexes, or
# commented out if it manual tab-indexes have
# already been assigned.
*/
$('input, select, textarea').each(function(){
$(this).attr('tabindex', Tab.i);
Tab.i++;
Tab.items++;
});
Tab.i = 0;
/* We need to listen for any forward or backward Tab
# key event tell the page where to focus next.
*/
$(document).on({
'keydown' : function(e) {
if (navigator.appVersion.match("Safari")) {
if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
e.preventDefault();
Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
e.preventDefault();
Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
}
}
});
/* We need to update Tab.i if someone clicks into
# a different part of the form. This allows us
# to keep tabbing from the newly clicked input
*/
$('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
Tab.i = $(this).attr('tabindex');
console.log(Tab.i);
});
}
$(document).ready(function() {
fixTabulation();
});
这不是完美的解决方案,但它比告诉所有用户在System Prefs中更改其Safari设置要好得多,大声笑。
答案 4 :(得分:0)
遇到同样的问题,必须以编程方式实现标签导航。幸运的是发现了这个jquery可能的插件https://github.com/marklagendijk/jQuery.tabbable并且很好用,这里是
require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
$(document).keydown((event) => {
if (event.keyCode === 9) {
window.$.tabNext();
event.preventDefault();
}
});
});
答案 5 :(得分:0)
iOS解决方案将按住Option键+ Tab键。
答案 6 :(得分:0)
对于那些像我一样也在寻找如何在浏览器堆栈中启用此功能的人:只需点击屏幕左上角的“ Safari”一词,然后可以选择“偏好设置”>“高级”>“按”标签(如{{3}中所述})