div失去焦点事件实现思路_javascript技巧
程序员文章站
2022-04-13 15:18:06
...
看本文得先了解以下几个事件(摘自w3c)。
blur事件: 当元素失去焦点时发生 blur 事件。
focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。
tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。
我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。
真实项目代码:
Esc.PopupMenu.prototype._createPopup=function(){
var popupDiv = $(''); //创建div
popupDiv.appendTo(this._owner.element); //将div加span
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show=function(){
popupDiv.show();
popupDiv.focus(); //让div得到焦点
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}
这段代码的意思是我用div模拟一个createPopup(IE可以直接生成),生成的时候给它一个tabindex属性,然后加入span,然后让它支持显示隐藏。特别值得注意的是popupDiv,focus(),必须要给div一个焦点,否则它没有焦点如何失去焦点。
blur事件: 当元素失去焦点时发生 blur 事件。
focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。
tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。
我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。
真实项目代码:
复制代码 代码如下:
Esc.PopupMenu.prototype._createPopup=function(){
var popupDiv = $(''); //创建div
popupDiv.appendTo(this._owner.element); //将div加span
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show=function(){
popupDiv.show();
popupDiv.focus(); //让div得到焦点
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}
这段代码的意思是我用div模拟一个createPopup(IE可以直接生成),生成的时候给它一个tabindex属性,然后加入span,然后让它支持显示隐藏。特别值得注意的是popupDiv,focus(),必须要给div一个焦点,否则它没有焦点如何失去焦点。
推荐阅读
-
可以用鼠标拖动的DIV实现思路及代码_javascript技巧
-
js动态删除div元素基本思路及实现代码_javascript技巧
-
可以用鼠标拖动的DIV实现思路及代码_javascript技巧
-
textarea焦点的用法实现获取焦点清空失去焦点提示效果_javascript技巧
-
阻止子元素继承父元素事件具体思路及实现_javascript技巧
-
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果_javascript技巧
-
阻止子元素继承父元素事件具体思路及实现_javascript技巧
-
js动态删除div元素基本思路及实现代码_javascript技巧
-
textarea焦点的用法实现获取焦点清空失去焦点提示效果_javascript技巧
-
javascript阻止scroll事件多次执行的思路及实现_javascript技巧