每日分享

HTML焦点事件详解

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dongzw/p/7056684.html

文章标签：

#javascript #ViewUI

一、失去焦点和获得焦点

<html>  
<head>  
    <title></title>  
    <script type="text/javascript"></script>  
    <!--  注意在使用$的时候需要引入Jqery-->  
    <!-- $("input[name='name']")-->  
    <script src="Jquery/jquery-1.4.1.min.js" type="text/javascript"></script>  
  
  
    <script type="text/javascript">  
        function checkValue(obj) {  
  
            if (obj.value == "") {  
                alert("长度不能为空");  
                obj.value = "长度不能为空";  
            }  
        }   
  
        function checkGetfocus(obj) {  
            //将当前控件的value设为"哥获得了焦点"  
            obj.value = "哥获得了焦点"  
  
        }  
    </script>  
</head>  
<!--当页面加载完毕，用户名Getfocus文本框获得焦点-->  
<body onload="$('#Getfocus').focus()">  
  
        <!--================================================================================================-->  
        <!--当用户点击“焦点”按钮的时候id=Getfocus文本框获得焦点-->  
        <input type="text" id="Getfocus" />  
  
        <!--blur()失去焦点方法-->  
        <input type="button" value="Getfocus失去焦点" onclick="document.getElementById('Getfocus').blur() " />  
  
        <!--focus()获得焦点方法-->  
        <input type="button" value="Getfocus获得焦点" onclick="document.getElementById('Getfocus').focus();" />  
          
        <!--================================================================================================-->  
  
        <!--onblur失去焦点事件-->  
        <input type="text" name="txt1" onblur="checkValue(this)" />  
        <input type="text" name="txt2" onblur="checkValue(this)" />  
        <input type="text" name="txt3" onblur="checkValue(this)" />  
        <hr />  
        <!---------------------------------------------------------------------------------------------------->  
        <!--onfocus获得焦点事件-->  
        <!--   this就是指当前控件本身，onfocus这个事件触发后，这个事件就会调用checkGetfocus函数，在调用这个函数的时候会把当前控件本身(自己)作为参数（this）传递给处理函数checkGetfocus，-->  
        <input type="text" name="t1" onfocus="checkGetfocus(this)" />  
        <input type="text" name="t1" onfocus="checkGetfocus(this)" />  
        <input type="text" name="t1" onfocus="checkGetfocus(this)" />  
        <!--================================================================================================-->  
</body>  
</html>

转载于:https://www.cnblogs.com/dongzw/p/7056684.html