【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]

例题：当鼠标移动到某个文本框时，提示语消失。 当失去焦点时，如果该文本框有内容，保存内容。没有内容，则恢复最初的提示语句

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <meta charset="UTF-8">
</head>
<body>
     <input type="text"  id="login" value="test_cmf" />
     <br/>
     <input type="password" />
    <script type="text/javascript">
    //focus事件
    //1.当login文本框有焦点的时候，文本框的值为空
    //2.否则取当前值
    $(document).ready(function(){
        $("#login").focus(function(){
            $current=$(this).val();
            if ($current==this.defaultValue) {
            $("#login").val("");
        }else{
            $("#login").val($current);
        }
        });
    });
    //blur事件
    //1.当login文本框的内容为空时，给他设置当前值
    //2.否则取当前值
    $(document).ready(function(){
        $("#login").blur(function(){
            $current=$(this).val();
            if ($current=="") {
                $("#login").val(this.defaultValue);
            }else{
                $("#login").val($current);
            }
        });
    });
    </script>
</body>
</html>

界面：

 

 

posted @ 2018-02-08 09:31  花花妹子。  阅读(390)  评论(0)  编辑  收藏  举报