Jquery使用Id获取焦点和失去焦点

Posted 2021-02-01 chaonuanxi

　　　　Jquery使用Id获取焦点和失去焦点有2种方法

先用第一种（val()=="空"）：

　　

 <div>
        <input type="text" id="address"  value="请输入邮箱地址" />
        <input type="text" id="password" value="请输入邮箱密码" />
        <input type="button"  value="登录" />
 </div>

<script type="text/javascript">
 $("#address").focus(function () {  //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱地址" ,则将输入框中的值清空
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "请输入邮箱地址")
            {
                $(this).val("");
            }
        });
        $("#address").blur(function () {  //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为   "请输入邮箱地址"
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "") {
                $(this).val("请输入邮箱地址");
            }
        });

        $("#password").focus(function () {  //focus获取鼠标焦点时,如果输入框的值为 "请输入邮箱密码" ,则将输入框中的值清空
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "请输入邮箱密码") {
                $(this).val("");
            }
        });
        $("#password").blur(function () {  //blur失去鼠标焦点时,如果输入框的值为空,则将输入框中的值为   "请输入邮箱密码"
            var txt_value = $(this).val();  //获取地址文本框的值
            if (txt_value == "") {
                $(this).val("请输入邮箱密码");
            }
        });
</script>

这是第二种（defaultValue）：

 <div>
        <input type="text" id="address"  value="请输入邮箱地址" />
        <input type="text" id="password" value="请输入邮箱密码" />
        <input type="button"  value="登录" />
 </div>

<script type="text/javascript">
  //还可以使用表单元素的defaultValue属性来实现同样的功能
        $("#address").focus(function () {  
            var txt_value = $(this).val();     
            if (txt_value == this.defaultValue) {  //this指向当前的文本框,this.defaultValue 就是当前文本框的默认值
                $(this).val("");
            }
        });
        $("#address").blur(function () {  
            var txt_value = $(this).val();  
            if (txt_value =="") {
                $(this).val(this.defaultValue);
            }
        });

        $("#password").focus(function () {  
            var txt_value = $(this).val(); 
            if (txt_value == this.defaultValue) {
                $(this).val("");
            }
        });
        $("#password").blur(function () {  
            var txt_value = $(this).val(); 
            if (txt_value == "") {
                $(this).val(this.defaultValue);
            }
        });
</script>