jQuery关于页面元素焦点事件

Posted 2021-06-27 花伤情犹在

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery关于页面元素焦点事件相关的知识，希望对你有一定的参考价值。

当元素失去焦点时发生 blur 事件。

当输入域失去焦点 (blur) 时改变其颜色：

$("input").blur(function(){
  $("input").css("background-color","#666666");
});

用法：

选中元素：$(“input”)
给元素添加 blur 事件：$(“input”).blur()
将函数绑定到 blur 事件:$(“input”).blur(function(){})

去除光标的焦点位置

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin: auto;text-align: center">
    文本框1:<input type="text" id="one"><br>
    文本框2:<input type="text" id="two"><br>
    <button id="ok">失去光标焦点</button><br>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $("#ok").click(function () {
        $("#two").blur();
    })
</script>
</body>
</html>

当元素获得焦点时，发生 focus 事件。

当输入框获得焦点时，改变它的背景色：

$("input").blur(function(){
  $("input").css("background-color","#666666");
});

用法：

选中元素：$(“input”)
给元素添加 focus 事件：$(“input”).focus()
将函数绑定到 focus 事件:$(“input”).focus(function(){})

将光标的焦点定位到指定的位置

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin: auto;text-align: center">
    文本框1:<input type="text" id="one"><br>
    文本框2:<input type="text" id="two"><br>
    <button id="ok">将鼠标的焦点移动到文本框2</button><br>
</div>
//引入jQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	//选中id为ok的元素，添加click事件并绑定函数
    $("#ok").click(function () {
    	//选中id为two的元素添加focus事件
        $("#two").focus();
    })
</script>
</body>
</html>

以上是关于jQuery关于页面元素焦点事件的主要内容，如果未能解决你的问题，请参考以下文章

jquery失去焦点与获取焦点事件blur() focus()