在IE,Firefox,Chrome和我使用过的大多数基于Windows的界面中,Tab密钥可用于从一个表单字段或超链接导航到下一个(例如"可操作"项目)(注意:我还没有在其他项目上测试过)操作系统)
但是,当Tab键时,Safari和Opera会跳过网页中的所有超链接.恕我直言,它是一个可用性错误,但我离题了.
是否有解决方法/黑客使Safari和/或Opera浏览这些链接？
我注意到Opera将接受该tabindex属性,如果设置,例如tabindex="0"因此在页面上的DOM流中保持链接"索引"......但Safari不想接受这一点.
对于那些感兴趣的人,这一点jQuery将使所有的超链接都可以表示.
//Make links 'tab-able' in Opera
$(document).ready(function(){
if($.browser.opera){
$('a[href]').attr('tabindex', 0);
}
});
...虽然这似乎适用于Opera ...有更好的解决方法吗？
我已经为表单中的输入字段定义了选项卡索引.当通过输入字段进行选项卡时,提交按钮永远不会获得焦点,页面上不同形式的一些其他输入字段将获得焦点.这些都有高于3的标签索引.为什么？
<form action="subscription.php" name="subscribe" method="post" onsubmit="return isValidEmailAndEqual()">
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1>
<br/>
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/>
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3>
</form>
CSS:
input {
background-color : #333;
border: 1px solid #EEE;
color: #EEE;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit {
background-color : #d7e6f1;
border: 1px solid #EEE;
color: #0000ff;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit:hover {
cursor: pointer; cursor: hand;
background-color : #d7e6f1; …我喜欢IE(也许是唯一的一件事)的一件事是如何在输入框,复选框和操作按钮之间切换.我认为这样可以更快更轻松地填写表格.
Safari和FF将在文本输入框之间进行选项卡,但完全忽略复选框和操作按钮.
我是否可以强制Firefox和Safari让我的用户在输入框,复选框和操作按钮之间进行选项卡？我该怎么编码呢？
谢谢你的帮助.
我对表单上的控件很少.我必须按照在HTML上创建顺序不自然的顺序设置tabIndex.在fag端有一个按钮,tabIndex没有被设置(它从不聚焦)只在这个元素上.
<button id="btnSave" tabindex = "86" title='click here'>Submit Here</button>
可能是什么原因？
感谢您的帮助.
我想在 div 元素离开焦点后执行一个功能。
我在 div 中使用 tabIndex 和 onBlur 函数。当我通过单击 div 内的任何元素手动放置焦点时，它工作正常。但是默认情况下，当在 div 内没有单击任何项目时，它不起作用。
我的组件是一个功能组件 & div 是动态呈现的，所以我也无法使用 useRef 设置焦点。
const renderHeaderCell = (header, headerKey) => {
return (
<div className="DataTable__header-cell-wrapper">
{filterable ? (
<IconButton onClick={() => toggleFilterPanel(headerKey)}>
<i className="material-icons">filter_list</i>
</IconButton>
) : null}
{activeFilterHeader === headerKey ? (
<div
tabIndex={0}
onFocus={e => {
console.log("DIV", "focus");
}}
onBlur={e => {
console.log("DIV", "blur");
}}
style={{ border: "1px solid blue" }}
>
DIV container
<input
type="text"
onFocus={e => {
console.log("input", "focus");
}} …TABS您能告诉我为什么在 safari 浏览器中使用时焦点不会转到按钮上或没有指示焦点位于按钮上吗？
在 Chrome 中它工作正常。问题出在SAFARI浏览器上。
这是我的代码 https://codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css
.App {
font-family: sans-serif;
text-align: center;
}
/* .js-focus-visible :focus:not(.focus-visible) {
outline: 0;
} */
button:focus,
a:focus {
outline-offset: 2px;
outline-width: 2px !important;
outline-style: dotted !important;
outline-color: currentColor;
}
.App button:focus,
.App a:focus {
outline: none !important;
}
.App button:focus-visible,
.App a:focus-visible {
outline-offset: 2px;
outline-width: 2px !important;
outline-style: dotted !important;
outline-color: currentColor;
}
.js-focus-visible :focus:not(.focus-visible) {
outline: none !important;
}
/*
Optionally: Define a strong focus indicator for …