1、先看问题

当我们要对一个div/span元素获取焦点的时候，直接对$("#div1").focus()是不能实现效果的，比如下图：

当点击输入框进行输入后，在点击区域弹出选择地段的时候，input输入框并没有失去焦点(或者说区域的div没有获得焦点)，就出现了键盘显示在弹层的上面导致无法选择的bug

解决办法有两个：

a:循环所有的input等可以获取焦点的元素，让他们失去焦点(blur);

b:点击区域选择地段的时候让div获取焦点，从而解决input不失焦的问题：

在这里对于普通的div/span等元素节点是不能直接获取焦点的，需要用到一个属性tabindex

2、关于tabindex的科普

如果试图触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性。

tabindex属性其实指定了点击计算机“Tab”键时光标移动的顺序，在点击计算机“Tab”键时tabindex属性值越小（最小为0）其所在的标签越先得到焦点

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>04</title>

    </head>

    <body>

        <input type="text" id="text1">

        <input type="text" id="text2">

        <input type="text" id="text3">

　　　　 <div>按钮</div>

    </body>

</html>

运行上面的代码点击计算机“Tab”键，这是你会发现input控件获取了焦点；input控件可以直接触发onfocus事件和onblur事件，但div不行

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>test</title>

    </head>

    <body>

        <input type="text" id="text1" tabindex = "3">

        <input type="text" id="text2" tabindex = "2">

        <input type="text" id="text3" tabindex = "1">

    </body>

</html>

运行上面的代码点击计算机“Tab”键，input会从右到左依次获取焦点

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>test</title>

    </head>

    <body>

        <input type="text" id="text1" tabindex = "1">

        <input type="text" id="text2" tabindex = "2">

        <input type="text" id="text3" tabindex = "3">

    </body>

</html>

运行上面的代码点击计算机“Tab”键，input会从左到右依次获取焦点

tabindex默认的会使用在以下元素（就是说默认可以获取焦点的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.这些元素不设置tabindex都可以获取焦点，其他元素需要设置tabindex才能获取到焦点，其中tabindex得知越小在tab键切换的时候就会首先聚焦

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>04</title>

    </head>

    <body>

        <input type="text" id="text1">

        <input type="text" id="text2">

        <input type="text" id="text3">

　　  　 <div tabindex="0">按钮</div>

    </body>

</html>

运行上面的代码div就会获取焦点，当开始的时候焦点在input里面输入的时候，当点击div，原input就会失焦而div也就获取到了焦点，问题自然就解决了

div/span等获取焦点问题(tabindex属性的简单理解)的更多相关文章

  1. javascript中无法通过div.style.left获取值的问题

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...

  2. 【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

  3. python动态获取对象的属性和方法

    http://blog.csdn.net/kenkywu/article/details/6822220首先通过一个例子来看一下本文中可能用到的对象和相关概念.01     #coding: UTF- ...

  4. 自制获取data-自定义属性

    jQuery.fn.dataset = function(attr, val) { // 获取数据集 if (arguments.length == 0) { var dataset = {}; jQ ...

  5. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  6. HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

    摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...

  7. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  8. jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 代码如下: <span id="span1" name="S1"&g ...

  9. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

随机推荐

  1. 关于heritrix安装配置时出现”必须限制口令文件读取访问权限”的解决方法

    转载:http://www.floatinglife.cn/关于heritrix安装配置时出现必须限制口令文件读取访问 最近开始写一个RSS聚合程序,需要爬虫支持,于是就整来heritrix,没想到, ...

  2. C#泛型在unity3D中的运用...

    泛型是什么? 这是摘自百度百科中对泛型的介绍: 泛型是c#2.0的一个新增加的特性,它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和拆箱,或对引用类型进行向下强制类 ...

  3. UserControl和CustomControl基础【PluraSight】

    UserControl UserControl实际上就是ContentControl,xaml里<UserControl></UserControl>tag之间包含的实际就是后 ...

  4. 窥探EasyMock（2）进阶使用篇

    from:http://www.iteye.com/topic/310313 1. 生成 Mock 对象 如何创建一个需要严格遵守调用顺序的mock对象? SomeInterface mockObj  ...

  5. EasyMock使用说明

    来自官网的使用说明,原文见http://www.easymock.org/EasyMock2_0_Documentation.html 1.1. 准备 大多数的软件系统都不是单独运行的,它们都需要于其 ...

  6. 编译cscope-15.8a遇到的问题与解决方案

    1)环境 主机:Linux ubuntu 3.2.0-32-generic-pae #51-Ubuntu SMP Wed Sep 26 21:54:23 UTC 2012 i686 i686 i386 ...

  7. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  8. 【M32】在未来时态下发展程序

    1.在未来时态下发展程序,就是接受“事情总会变化”的事实,并准备应对之策. 2.记住,程序的维护者通常不是最初的开发者,因此,设计和实现的时候,应该考虑别人更好地理解,修改自己的程序. 3.重要的一点 ...

  9. jQuery：在一个回调中处理多个请求

    我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getSc ...

  10. C++ Code_ScrollBar

    主题 1.  ScrollBar的使用 2. 3. 4. 5.      属性 HScrollBar VScrollBar 直接拖拽1其中任意空间到对话框上面是,你一拖拽滚动条,它立即回到原始位置   ...