首先tabindex是Tab键焦点跳跃的顺序。
<div class="title">关于元素获取焦点:</div>
<div class="title">1,隐藏元素无法获取焦点</div>
<p>下面有个隐藏的Input:</p>
<p style="display: none;"><input class="input" id="textbox" name="textbox" value="Hi,CssRain!!!"></p>
<input οnclick="process0();" value="无法使隐藏元素获取焦点" type="button">
<p>解决方法:先把元素显示,在获取焦点。</p>
<div class="title">2,对于div等特殊元素获取焦点</div>
<div id="a">我是DIV元素,我不带tabindex="-1"。</div>
<input οnclick="process1();" value="Div不能获取焦点" type="button">
<div id="b" tabindex="-1">我是DIV元素,我带tabindex="-1",点击下面按钮试试效果。</div>
<input οnclick="process2();" value="使Div获取焦点" type="button">
<script>
function process0(){
var textbox = document.getElementById("textbox");
textbox.onfocus = function(){alert('获取焦点');}
textbox.focus();
}
function process1(){
var a = document.getElementById("a");
a.onfocus = function(){alert('获取焦点');}
a.focus();
}
function process2(){
var b = document.getElementById("b");
b.onfocus = function(){alert('获取焦点');}
b.focus();
//非常推荐使用 tabindex = -1,基本无副作用!
}
</script>
tabindex解决DIV获得焦点的问题(转)
最新推荐文章于 2024-07-03 02:59:28 发布