详解HTML onfocus获得焦点和onblur失去焦点事件

HTML onfocus 事件属性

定义和用法

onfocus 属性在元素获得焦点时触发。

onfocus 常用于 input> 、select> 以及 a> .

提示：onfocus 属性与 onblur 属性相反。

注释：onfocus 属性不适用于以下元素：base> 、bdo> 、br> 、head> 、html> 、iframe> 、meta> 、param> 、script> 、style> 或 tITle> 。

实例

当输入字段获得焦点时触发函数。此函数改变输入字段的背景色

script>
function setStyle(x){
    document.getElementById(x).style.background="yellow";
}
    /script>
    /head>
    body>
     p>
    当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。/p>
     First name: input tyPE="text" id="fname" onfocus="setStyle(this.id)">
    br>
    Last name: input type="text" id="lname" onfocus="setStyle(this.id)">
     /body>
    

HTML onblur 事件属性

定义和用法

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

onblur 常用于表单验证代码（例如用户离开表单字段）。

实例

当用户离开输入字段时对其进行验证：

script>
function upperCase(){
VAR x=document.getElementById("fname").valuedocument.getElementById("fname").value=x.toUpperCase()}
    /script>
    /head>
    body>
     p>
    请输入您的姓名，然后把焦点移动到字段外：/p>
    请输入您的姓名（英文字符）：input type="text" name="fname" id="fname" onblur="upperCase()">
     /body>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！