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. C3P0连接池使用小结

    C3P0在最近的demo中也用了(我用的是0.9.2.1版本),因为单例很难应付大量并发. 用法详见文档:http://www.mchange.com/projects/c3p0/ 基本的用法在htt ...

  2. VC中常用的宏[转]

    我们在VS环境中开发的时候,会遇到很多宏定义,这些宏可以应用到代码中,或用于编译.工程选项等设置,总之是我们开发中必不可少的工具,有必要做一个总结.有些宏是C/C++定义的,有些宏是VC环境预定义的. ...

  3. 转载:rebar和erlang

    使用rebar生成erlang release 并进行热代码升级 http://blog.sina.com.cn/s/blog_6530ad590100wmkn.html 使用rebar工具开发erl ...

  4. PHP安装环境,服务器不支持curl_exec的解决办法

    转自:http://jingyan.baidu.com/article/00a07f38909c6b82d028dc83.html windows下开启方法: 拷贝PHP目录中的libeay32.dl ...

  5. 你可能不知道的Linux/GNU bash sort多列排序功能

    (转载请注明原创于潘多拉盒子) Linux man pages的缺点就是,如果你不会用某个命令,那么看完了多半还是不会.原因是,没有例子!比较囧吧? sort是提供了多列排序的功能的.通过-k选项,可 ...

  6. 在C#中使用全局鼠标、键盘Hook

    今天,有个同事问我,怎样在C#中使用全局钩子?以前写的全局钩子都是用unmanaged C或C++写个DLL来实现,可大家都知道,C#是基于.Net Framework的,是managed,怎么实现全 ...

  7. cocos2dx的图片载入

    //data: 图片文件数据 dataLen: 文件长度 bool Image::initWithImageData(const unsigned char * data, ssize_t dataL ...

  8. Lua游戏脚本语言入门（一）

    作者: 沐枫 (第二人生成员) 原文地址:http://job.17173.com/content/2009-01-22/20090122143452606,1.shtml 在这篇文章中,我想向大家介 ...

  9. POJ 3624 Charm Bracelet

    DP 一直是心中痛,不多说了,这个暑假就坑在这上了. 这暑假第一道DP题,01背包问题. 题意是说物品有 重量和价值 ,但你能承受的重量有限,问你能带的最大价值. 这题数组开大点,尽管不知道有啥坑点, ...

  10. 自增锁ID复用问题

    mysql> select * from pp; +----+------+ | id | name | +----+------+ | xx | | xx | | xx | | xx | | ...