javascript如何将焦点移除-js教程-PHP中文网

javascript如何将焦点移除

醉折花枝作酒筹

发布： 2021-06-15 10:01:04

原创

3373人浏览过

javascript将焦点移除的方法：1、利用onblurs属性，语法“onblur="需要执行的js代码”；2、利用blur()函数，语法“$(selector).blur(function);”。

javascript如何将焦点移除

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript 焦点移除

1、利用onblurs属性

onblur 属性在元素失去焦点时触发。

立即学习“Java免费学习笔记（深入）”；

语法

onblur="SomeJavaScriptCode"

登录后复制

支持该事件属性的 HTML 标签：

支持该事件的 JavaScript 对象：

button, checkbox, fileUpload, layer, frame, password,radio, reset, submit, text, textarea, window

实例：

造点AI

夸克 · 造点AI

325

查看详情

<html>

<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>

<body>

Enter your name: <input type="text" id="fname" onblur="upperCase()"><br />
Enter your age: <input type="text" id="age" onblur="alert(this.id)">

</body>
</html>

登录后复制

失去焦点时，弹出一个弹窗：

2、利用blur() 方法

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

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

语法：

$(selector).blur(function)

登录后复制

示例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

登录后复制