让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦
DIV和其他普通标签是不具有onfocus和onblur事件的。
INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?
有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在INPUT和A上跳转。
因为INPUT和A标签具备TAB属性。
我们只需要给DIV或者SPAN等普通标签创建TAB,这些普通标签就拥有了TAB属性。
以DIV为例:
让DIV拥有TAB并具有onfucus和onblur属性。
给元素创建TAB属性:tabindex=参数(这里和z-index类似,计算TAB起点)。
<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;">让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦</div>
注:定义TAB属性后,元素是默认会加上焦点虚线的,那么在IE中可以通过hidefocus="true"去除!其他浏览器通过outline=0进行去除
让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦的更多相关文章
- 说说focus /focusin /focusout /blur 事件
事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...
- focus /focusin /focusout /blur 事件
事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...
- 【五】jquery之事件(focus事件与blur事件)[提示语的出现及消失时机]
例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...
- input 输入框 change 事件和 blur 事件
输入框的 change 和 blur 事件绝大多数情况下表现是一致的,输入结束后离开输入框会先后触发 change 和 blur.那么这两个事件的区别在哪呢? 当文本框获得焦点后,没有输入任何内容, ...
- jquery点击click事件和blur事件冲突如何解决
最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...
- 【jQeury】input输入框状态,input事件,blur事件,focus事件
//输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...
- element-ui <el-input> 注册blur事件
<template> <div class="demo"> <el-input placeholder="注册blur事件" v- ...
- 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规则,类 ...
- 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)
一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...
随机推荐
- Java 11正式发布,这几个逆天新特性教你写出更牛逼的代码
就在前段时间,Oracle 官方宣布 Java 11 (18.9 LTS) 正式发布,可在生产环境中使用! 这无疑对我们来说是一大好的消息.作为一名java开发者来说,虽然又要去学习和了解java11 ...
- Android开发学习笔记-自定义组合控件
为了能让代码能够更多的复用,故使用组合控件.下面是我正在写的项目中用到的方法. 1.先写要组合的一些需要的控件,将其封装到一个布局xml布局文件中. <?xml version="1. ...
- ESPCN处理彩色图像代码
原来仅处理了Y通道,输出的灰度图像. Super-Resolution/ESPCN at master · wangxuewen99/Super-Resolution · GitHub https:/ ...
- war内部结构
war index.html(非必须) WEB-INF classes (java编译之后的class文件) lib(jar文件) web.xml(war包描述文件) subdirectories[可 ...
- [OpenCV] Samples 02: Mat - 图像矩阵
前言 一.简介 Ref:IplImage, CvMat, Mat 的关系 Mat是opencv2.0推出的处理图像的新的数据结构,现在越来越有趋势取代之前的cvMat和lplImage. 相比之下Ma ...
- [Module] 08 - MVP by Mosby
From: Mosby MVP使用教程[作者用心] View是消极视图(Passive View), 它尽量不去主动做事, 让Presenter通过抽象方式控制View 例子: 例如Presenter ...
- Images.xcassets 的简单使用
总结起来Images.xcassets 就这么几句话 (1)以下開始简单整理 进入images.xcassets 右键--->New Image Set 或者点XCode的images.xcas ...
- 九度 1464:Hello World for U
题目描述: Given any string of N (>=5) characters, you are asked to form the characters into the shape ...
- vim分屏
使用vim分屏的时候 ,可以在终端直接输入 vim -On 1.php 2.php 3.php 垂直分屏 三个文件 如果是在某个窗口里面想打开另外一个文件如何做呢? 按下esc,然后按下冒号 输入 回 ...
- Oracle 常用函数备查
ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits ...