zoukankan      html  css  js  c++  java
  • 让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;200px;height:200px;outline=0;">让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦</div>

    注:定义TAB属性后,元素是默认会加上焦点虚线的,那么在IE中可以通过hidefocus="true"去除!其他浏览器通过outline=0进行去除 

  • 相关阅读:
    js中面向对象的写法
    js中防止全局变量被污染的方法
    移动端的头部标签和meta
    励志
    UX是什么?
    HTTP
    Django RestFramework (DRF)
    Vue(一)
    Vue-基础
    Vue-es6基础语法
  • 原文地址:https://www.cnblogs.com/YuyuanNo1/p/9929555.html
Copyright © 2011-2022 走看看