tabindex解决DIV获得焦点的问题(转)

最新推荐文章于 2024-10-28 18:54:07 发布

原创最新推荐文章于 2024-10-28 18:54:07 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了网页中元素如何获取焦点的方法，包括隐藏元素无法获取焦点的原因及解决方案，以及如何让不支持焦点的元素如div通过设置tabindex属性来获取焦点。

首先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 onclick="process0();" value="无法使隐藏元素获取焦点" type="button">
<p>解决方法：先把元素显示，在获取焦点。</p>

<div class="title">2，对于div等特殊元素获取焦点</div>
<div id="a">我是DIV元素，我不带tabindex="-1"。</div>
<input onclick="process1();" value="Div不能获取焦点" type="button">
<div id="b" tabindex="-1">我是DIV元素，我带tabindex="-1",点击下面按钮试试效果。</div>
<input onclick="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>