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. wikioi 3038 3n+1问题

    题目描述 Description 3n+1问题是一个简单有趣而又没有解决的数学问题.这个问题是由L. Collatz在1937年提出的.克拉兹问题(Collatz problem)也被叫做hailst ...

  2. call()和apply()方法

    还在处在刚刚学习JavaScript的初级阶段,所以理解相对浅显,是一种简单的模式理解.这里做一个笔记,让自己在回顾的时候,更加牢记. call()和apply()的形式 A.call(B," ...

  3. Django官方文档学习2——数据库及模板

    网址:https://docs.djangoproject.com/en/1.10/intro/tutorial02/ 1.扫描installed_apps,创建需要的数据库table python ...

  4. DELPHI下读取与设置系统时钟

    在DELPHI下读取与设置系统时钟 很多朋友都想在自己的程序中显示系统时间 这在DELPHI中十分容易 利用DateToStr(Date)及TimeToStr(Time)函数即可实现. 二者的函数原型 ...

  5. Codeforces Round #311 (Div. 2) A. Ilya and Diplomas 水题

    A. Ilya and Diplomas Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/ ...

  6. android4.4.2 短信广播变更

    近期三星陆续放出android4.4.2ROM更新包,android4.4.2对短信虽说是放开了权限,但其实是加强了限制,一台手机智能通过一个设置为默认应用的短信应用软件才能发送短信,否则就无法对短信 ...

  7. 如何在XAF中显示自定义窗体和控件

    https://www.devexpress.com/Support/Center/Example/Details/E911

  8. dsPIC33EP 高速PWM模块初始化设置及应用

    //文件 p33pwm6.h #ifndef _P33PWM6_H_ #define _P33PWM6_H_ //#include "p33pwm6.h" #define FSYN ...

  9. [Angular2 Router] Understand the Angular 2 Base href Requirement

    The <base href=”/”/> you define will determine how all other assets you plan on loading treat ...

  10. HTML <base> 标签

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...