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

首页

web前端

js教程

javascript如何将焦点移除

醉折花枝作酒筹

Jun 15, 2021 am 10:01 AM

javascript

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

javascript如何将焦点移除

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

javascript 焦点移除

1、利用onblurs属性

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

语法

onblur="SomeJavaScriptCode"

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

3499910bf9dac5ae3c52d5ede7383485, eb37297a59d90581fe5571fb4ef859fe, 208700f394e4cf40a7aa505373e0130b, 03fc64e1e502d5ba947b3a9af06d2d2a, a4b561c25d9afb9ac8dc4d70affff419, 71af07a0e88a1ac1ff73f855702ac153, 3d49bde0e0b2e042578ad34140b6c48e, b8a712a75cab9a5aded02f74998372b4,bb9345e55eb71822850ff156dfde57c8, 63bd76834ec05ac1f4c0ebbeaafb0994, f3a85e1241a187c5ac462d886e9a968b, 67bc4f89d416b0b8236eaa5f43dee742, 823db3943044a0a9a620ada8d4b1d965, 7f9d788ef50b059a7f76f3d2e4ccc9d1, dc6dce4a544fdca2df29d5ac0ea9906b, 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94,907fae80ddef53131f3292ee4f81644b, 2b5469ab79cf842344327415c3b3bb95, ff9c23ada1bcecdd1a0fb5d5a0f18437, 04a0d55efbbfd646a993fbc01f262c57, f900b4fc197b16ab214eecf015bb6bd2, 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc, f32b48428a809b51f04d3228cdf461fa, 5a8028ccc7a7e27417bff9f05adf5932,d5ba1642137c3f32f4f4493ae923989c, a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, 426be984ffbbb815d7d88e3543a85d91, 5e4e803d53d659f332070b5d4aa430db, 2e1cf0710519d5598b1f0f14c36ba674, e911751791aa3ba95dc724e2fb905976, 25edfb22a4f469ecb59f1190150159c6,273238ce9338fbb04bee6997e5552b95, c34106e0b4e09414b63b2ea253ff83d6, e388a4556c0f65e1904146cc1a846bee, e03b848252eb9375d56be284e690e873, 1244aa79a84dea840d8e55c52dc97869, 162cd570ab1483e383d78dcb7f452f7c, 221f08282418e2996498697df914ce4e, d015d241ae6d34c34210679b5204fe85, 45a2772a6b6107b401db3c9b82c049c2,8e99a69fbe029cd4e2b854e244eab143, b96cac025db4031319c29e1eb68f19d6, 2cdea26b4c3988e37d674b56660962a7, f5d188ed2c074f8b944552db028f98a1, 92cee25da80fac49f6fb6eec5fd2c22a, b6c5a531a458a2e790c1fd6421739d1c, 4750256ae76b6b9d804861d8f69e79d3, 06669983c3badb677f993a8c29d18845,b4d429308760b6c2d20d6300079ed38e, ae20bdd317918ca68efdc799512a9b39, a34de1251f0d9fe1e645927f19a896e8, 78f983dbc27872ba42409adefe5049d9, ff6d136ddc5fdfeffaf53ff6ee95f185, b7f90f73cad438258bf67e62f79b2113

支持该事件的 JavaScript 对象：

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

实例：

<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>