热门搜索 :
汽车文化
您的当前位置:首页正文

div失去焦点事件实现思路_javascript技巧

2023-12-04 来源:学车网

看本文得先了解以下几个事件(摘自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一个焦点,否则它没有焦点如何失去焦点。

小编还为您整理了以下内容,可能对您也有帮助:

如何用JS实现div失去焦点事件

<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".a").mouseover(function(){
        $(this).css("border-color", "black");
    }).mouseout(function(){
        $(this).css("border-color", "transparent");
    });
});
</script>
<style>
.a { padding: 50px; background: red; width: 100px; border: 5px solid transparent; } 
</style>
<div class="a"></div>

如何用JS实现div失去焦点事件

<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".a").mouseover(function(){
        $(this).css("border-color", "black");
    }).mouseout(function(){
        $(this).css("border-color", "transparent");
    });
});
</script>
<style>
.a { padding: 50px; background: red; width: 100px; border: 5px solid transparent; } 
</style>
<div class="a"></div>

jquery一个div怎么获得焦点和失去焦点

DIV获取焦点(两种方法):

DIV直接使用focus()和blur()两个方法是无效的,需添加tabindex="0"或者contenteditable="true"属性

①:设置div为可编辑状态,则可点击获取焦点,同时div的内容也是可以编辑的;如:

<div contenteditable="true">11111111111111</div>

②:设置div的tabindex,此时div的内容是不可编辑的;如:

<div tabindex="0">11111111111111</div>

PS:设置tabindex属性,按键盘Tab键可让其获取焦点,其中tabindex的值越小在tab键切换的时候就会首先聚焦

JavaScript OnMouseOut事件

javascript onmouseover和onmouseout事件

onmouseover和onmouseout鼠标移入移出时触发的事件:

onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。

onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。

onmouseover和onmouseout 这两个事件在javascript中较常用。

下面通过一个示例更深入了解这两个事件的使用:

示例:鼠标移入时,改变字体的背景色,移出时,还原默认的背景色。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>鼠标移入时,改变字体的背景色,移出时,还原默认的背景色。</title>

<style>

.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}

</style>

<script>

function aixuexi(){

var woaixuexi=document.getElementById("woaixuexi");

woaixuexi.style.background="yellowgreen";

}

function xuexi(){

var xuexi=document.getElementById("woaixuexi");

xuexi.style.background="#abcdef";

}

</script>

</head>

<body>

<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>

</body>

</html>

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top