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. JS:公历、农历互转

    先申明这段代码不是我写的,纯粹只是觉的比较好用,所以记录下来以后继续使用,也同样分享给大家,大家有更好的可以推荐给我,谢谢! function CalConv(M, dateStr) { if (da ...

  2. as [Frame]元标签

    [Frame(factoryClass="XXX_Class")] 利用Frame元标签.在主SWF类名上面添加 [Frame(factoryClass="加载类类名&q ...

  3. cocos2d-x 2.2 资源更新AssetsManager例子代码

    转自:http://www.58player.com/blog-2327-601.html // // UpgradeLayer.h // AmazeDemo // // Created by lsw ...

  4. 收集计算机分区信息，去除列中的重复值（Excel）（空行）

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  5. OAB配置

    OAB管理: http://blogs.technet.com/b/exchange_chs/archive/2013/01/31/exchange-server-2013-oab-managing- ...

  6. Codeforces Round #335 (Div. 2) C. Sorting Railway Cars 动态规划

    C. Sorting Railway Cars Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/conte ...

  7. 苹果iOS手机暗藏间谍软件的揭秘者：扎徳尔斯基

    大家知道,苹果iOS手机的短消息server(SMS)是用硬件加密的,看起来非常安全.可是,Jonathan Zdziarski发现苹果公司有意地放进去一个"文件转发server" ...

  8. Android蓝牙传感应用

    Android手机一般以客户端的角色主动连接SPP协议设备(接上蓝牙模块的数字传感器),连接流程是: 1.使用registerReceiver注册BroadcastReceiver来获取蓝牙状态.搜索 ...

  9. HTML WEB 和HTML Agility Pack结合

    现在,在不少应用场合中都希望做到数据抓取,特别是基于网页部分的抓取.其实网页抓取的过程实际上是通过编程的方法,去抓取不同网站网页后,再进行分析筛选的过程.比如,有的比较购物网站,会同时去抓取不同购物网 ...

  10. iOS 原生地图（MapKit、MKMapView）轨迹渐变

    WechatIMG2.png 项目已接入高德地图,并且大部分功能已经实现好,但BOSS觉得iOS自带的地图效果更好...本着面向老板编程的思想,换之.还好,高德地图是在MapKit上封装的,大部分ap ...