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. Spring REST实践之Documenting REST Services

    Swagger基本介绍 Swagger是创建交互式REST API文档的规范和框架,它能自动同步REST服务的任何变化,同时为生成API客户端代码提供了一套工具和SDK生成器.Swagger规范由两种 ...

  2. [转]C/C++中的memset

    http://blog.csdn.net/songuooo/article/details/7819790 1. 需要的头文件 C中为<memory.h> 或 <string.h&g ...

  3. VC++中几种字符标志的解释

    VC++中几种字符标志的解释 LPSTR = char * LPCSTR = const char * LPWSTR = wchar_t * LPCWSTR = const wchar_t * LPO ...

  4. 浅谈Oracle函数返回Table集合

    在调用Oracle函数时为了让PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合 ...

  5. 让<a></a>diabled 的方法

    <a href="test_att_data.php" disabled="true" onclick="return false"& ...

  6. k近邻法的C++实现：kd树

    1.k近邻算法的思想 给定一个训练集,对于新的输入实例,在训练集中找到与该实例最近的k个实例,这k个实例中的多数属于某个类,就把该输入实例分为这个类. 因为要找到最近的k个实例,所以计算输入实例与训练 ...

  7. 12个非常不错的免费HTML后台管理模板

    下面介绍的这些免费后端管理HTML模板,都非常不错.建议您收藏. 1.  Charisma Admin Template (示例) Charisma是一个响应式管理模板,基于Twitter Boots ...

  8. linux C(hello world)

    1.使用vi/vim进行编写代码并保存为hello_world.c.如下: /* This is my first C program*/ #include <stdio.h> int m ...

  9. CSS3 Animation 基于 less 构建的 css3 动画库

    LESS动画优点 · 快速开发css3动画 · 采用less mixins写法,不会生成冗余css · 已加入主流浏览器前缀,保证最大兼容性 · LESS-Animation 部分mixins支持传参 ...

  10. SharedObject使用：在FluorineFx.net与Flex中使用共享对象维护在线用户列表实例【转】

    一.添加一个新的FluorineFx的服务类项目OnLineService,删除原有的Sample.cs,并添加一个用户类定义与一个ApplicationAdpater类:如下: /*-- User. ...