`
fireq3
  • 浏览: 37976 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

首先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>

分享到:
评论

相关推荐

    div失去焦点事件实现思路

    为了解决这个问题,我们可以利用`tabIndex`属性。`tabIndex`属性用于设置元素在页面上的获取焦点顺序。当用户按下`Tab`键时,浏览器会按照`tabIndex`的数值从小到大依次赋予焦点。如果两个元素`tabIndex`相同,则...

    DIV的失去焦点(blur)实现方法

    通过为DIV设置tabindex="0",这使得原本不能获得焦点的DIV可以接收键盘事件,类似于可聚焦的表单元素。这样,我们就可以直接使用onblur事件来处理DIV失去焦点的情况。对于使用Internet Explorer浏览器的用户,可能...

    div+blur+event+angular2

    4. `src/styles.css` 或 `src/app/div.component.css`: CSS样式文件,可能包含了使 `&lt;div&gt;` 能获取焦点的设置,如 `tabindex="0"`。 5. `package.json`: 项目依赖的定义,可能包含了Angular和其他相关库。 通过对这...

    Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    在使用Bootstrap框架构建网页时,有时会遇到一个常见的问题,那就是Bootstrap弹出框(modal)中的输入框(input)无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时,由于Bootstrap...

    JavaScript 关于元素获取焦点(隐藏元素与div)

    为了解决这个问题,可以在让隐藏元素获取焦点之前先将其显示出来。具体做法是修改CSS样式,使得元素可见,然后再调用`focus()`方法。 **示例代码:** ```javascript function process0() { var textbox = ...

    用tabIndex轻松实现网页导航

    1. **支持范围**:`tabIndex`属性最早在IE 4.0版本中得到支持,现在几乎所有的现代浏览器都支持此属性。任何HTML元素都可以设置`tabIndex`,包括那些通常不与键盘交互的元素。 2. **值的含义**: - `tabIndex=0`:...

    Div+Css的Tab菜单

    例如,使用`tabindex`属性设置Tab的焦点顺序,使用`aria`属性提供额外的语义信息。 综上所述,"Div+Css的Tab菜单"是网页设计中不可或缺的一部分,它结合了HTML布局和CSS美化,实现了高效、美观且用户友好的导航。...

    详细总结Javascript中的焦点管理

    让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法 &lt;div id=test xss=removed&gt;div&lt;/div&gt; &lt;button id=btn&gt;div元素获得焦点&lt;/button&gt; [removed] btn.onclick = function()...

    javascript tabIndex属性

    `tabIndex`属性是JavaScript中一个非常实用的功能,主要用于提升网页表单的可访问性和交互性。这个属性允许开发者自定义用户使用键盘Tab键在页面元素间切换的顺序,而不仅仅是按照HTML元素出现的顺序。这在创建无...

    JavaScript & CSS 实现div选中

    这需要我们使用`tabindex`属性让div可聚焦,并添加`keydown`事件监听器来响应空格键。 结合以上内容,我们可以看到,通过JavaScript和CSS,我们可以优雅地实现div的选中效果,提供良好的用户体验和视觉反馈。在实际...

    HTML5之tabindex属性全面解析

    - 第8行的div元素设置为tabindex="-1",这表示该div不会通过Tab键获得焦点。 - 第9行到第11行的a标签分别设置了tabindex="3"、tabindex="1"和tabindex="2",按照这些值从小到大的顺序,"Hel"链接会首先获得焦点,...

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex=-1 删掉(测试成功): &lt;div id=myModal class=modal tabindex=-1 role=...

    实用div+css导航

    6. **访问键与焦点管理**:为了确保无障碍性,可以设置`tabindex`属性和`:focus`伪类,使导航可以通过键盘进行操作。 7. **CSS预处理器**:像Sass或Less这样的CSS预处理器可以简化CSS编写,通过变量、嵌套规则和...

    js键盘箭头控制上下选中标签元素

    HTML中的`&lt;input&gt;`、`&lt;textarea&gt;`等元素默认支持焦点和选中状态,但如果我们想让其他元素(如`&lt;div&gt;`或`&lt;span&gt;`)具有这种功能,需要手动设置`tabIndex`属性并调用`focus()`方法: ```html &lt;div tabindex="0" class...

    div移动 输入框不能输入的问题

    为了解决这个问题,我们需要理解浏览器的渲染机制以及如何控制元素的焦点。 首先,浏览器在渲染页面时,会按照HTML元素的层级关系(z-index)决定哪些元素在前,哪些元素在后。如果一个元素(如移动层)的z-index...

    Jquery1.8 chm

    2012年11月14日 jQuery 1.8.3 发布,修复 bug 和性能衰退问题 ... jQuery 1.8.2在IE9中调用ajax失败的问题  jQuery 1.7.1不能正确地设置IE7中克隆元素的... 在Chrome和Safari中,无法正确检测包含可编辑内容的DIV的焦点

    设置尺寸和获取焦点.docx

    开发者可以使用`tabindex`属性来设定元素的获取焦点顺序,或者通过JavaScript来手动设置焦点: ```html &lt;input type="text" id="input1" tabindex="1"&gt; &lt;input type="text" id="input2" tabindex="2"&gt; ``` ```...

Global site tag (gtag.js) - Google Analytics