韦德国际1946英国 > 计算机网络 > div失去焦点事件实现思路,DIV焦点事件详解

原标题:div失去焦点事件实现思路,DIV焦点事件详解

浏览次数:68 时间:2019-09-11

focus事件:focus() 方法用于赋予文本域主题(也值让有些因素获得难点事件)。

 

你或然感兴趣的篇章:

  • 文本框点击时文字消失,失去宗旨时文字出现
  • jquery-1.2.6获得难题与失去核心的写法
  • js 失去主题时关闭层达成代码
  • 文本框获得主题和失去主旨的论断代码
  • 在js(jquery)中赢得文本框主旨和失去宗旨的措施
  • input 输入框得到/失去大旨时遮掩/显示文字(jquery版)
  • jquery获取关节和失去主旨事件代码
  • textarea主旨的用法完结获取关节清空失去宗旨提示功用
  • wang艾德itor编辑器失去大旨后还是能够在原来的地点置插入图片深入分析

添加 tabindex='-1' 属性;

看本文得先了然以下多少个事件(摘自w3c)。

1 <div class="wl-product" id="wl-product"></div>

这段代码的意思是自个儿用div模拟八个createPopup(IE能够直接扭转),生成的时候给它一个tabindex属性,然后步向span,然后让它扶助显得隐敝。极度值得注意的是popupDiv,focus(),必须求给div三个火爆,不然它并未有标准如何错失核心。

果真八个事件都得以执行。

咱俩都知情blur只是本着form表单控件的,而对于 span , div , li 之类的,则不能够触发它们的动作,现在大家只需求安装二个tabindex属性则能够触发它们的要害事件了。

接着看Tabbing navigation的部分:
Those elements that do not support the tabindex attribute or support it and assign it a value of "0" are navigated next. These elements are navigated in the order they appear in the character stream. 
这里看得不太通晓,关键的情趣是给成分设置tabindex为0就能够被导航到了(能得到关节了)。
测量试验上面包车型大巴代码(ff):

复制代码 代码如下:

< div  id ="test"  style ="width:100px; height:100px; background-color:#CCC;"  onfocus ="alert(1)" ></ div > 
< script > document.getElementById( " test " ).focus(); </ script >

Esc.PopupMenu.prototype._createPopup=function(){
var popupDiv = $('<div tabindex=1></div>'); //创建div
popupDiv.appendTo(this._owner.element); //将div加span
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show=function(){
popupDiv.show();
popupDiv.focus();<span style="white-space:pre"> </span>//让div获得难点
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}

o.tabIndex  =   - 1 ;

blur事件: 当成分失去宗旨时发生 blur 事件。

< ul style = " width:100px; height:100px; background-color:#CCC; "  onfocus = " alert(1) "  onkeydown = " alert(2) " >< / ul>

真实性项目代码:

再看:Tabbing navigation的部分

tabIndex属性:tabIndex 属性可安装或重返按键的 tab 键调整次序。

换成ul就又无法接触事件了,怎么搞的。

切实详解:

默许:获取不到热门事件(blur)

 

莫不是div就不能够获得关节?用下边包车型大巴代码测验(ff):

但是w3c说得很模糊,msdn上倒是很精晓:
An element can have focus if the tabIndex property is set to any valid negative or positive integer.
Elements that receive focus can fire the onblur and onfocus events as of Internet Explorer 4.0, and the onkeydown, onkeypress, and onkeyup events as of Internet Explorer 5.
如果成分的tabIndex属性设置成任何有效的整数那么该因素就能够博得关键。成分在获得关键后就可以触发onblur,onfocus,onkeydown, onkeypress和onkeyup事件。

绑定了keydown之后,点击一下器皿(获取关节)后就会用方向键调整方向了,但一旦(未有拿走核心时)点击滑块,如故触发不了事件。
因为滑块在拖动作效果果中ie的鼠标捕获和ff的撤消暗许动作导致容器不能够取得主旨,这手动设置行吗?
是足以的,ff中就是直接在滑块的mousedown事件中实施容器的focus方法获得主旨。
ie本来也是足以的,但ie中当指标举办focus方法时,要是该对象有点在滚动条外就能够活动滚动到合适的职责(万幸点击不会如此)。
为了减弱影响,程序中把滑块也绑定了键盘调节,那样点击滑块时借使试行滑块的focus方法得到大旨就可以了:

不等tabIndex值在tab order(Tabbing navigation)中的景况:
Objects with a positive tabIndex are selected in increasing iIndex order and in source order to resolve duplicates.
Objects with an tabIndex of zero are selected in source order. 
Objects with a negative tabIndex are omitted from the tabbing order.
tabIndex值是正数的目的依据递增的值依次和代码中的地方顺序来被增选
tabIndex值是0的靶子依照在代码中的地方顺序被增选
tabIndex值是负数的靶子会被忽视

无论怎么着都触发不了onkeydown事件(ie能够触发),那就奇异了,遵照一般的思路应该是足以的呦。
其一可以从w3c关于Keyboard伊夫nt的一对中找到原因:
Keyboard events are commonly directed at the element that has the focus.
大概正是说键盘开关事件一般针对能得到关节的因素,正是不可能博得关节的因素就不可能触发键盘开关事件了。

还确确实实要命,那难点就在于怎么使div能获得关节了(当然这一个是转了成都百货上千弯才想出来的)。

ff成分别拿到得核心后会出现一个虚线框,去掉会美观一点:

最终开采给成分设置tabIndex就能够让要素能获得关节了,倘若无需详细询问的话下边能够略过。
率先探问w3c关于onfocus的一部分:
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. 
This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 
当成分通过点名(点击)或tab导航(Tabbing navigation)获得宗旨,onfocus事件就能够触发。
该属性会接纳在偏下因素(正是说默许能够获取关节的因素):A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
测量检验下边包车型客车代码:

本条不知晓是还是不是符合典型,但貌似ff跟ie是同样的(分歧的地方后边会说)。
那就是说设置多个负的tabIndex值应该是最出彩的了。

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:div失去焦点事件实现思路,DIV焦点事件详解

关键词:

上一篇:如何用jquery控制表格奇偶行及活动行颜色,一个

下一篇:没有了