1.jQuery练习1 ---表单_jquery表单基础练习-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehangongzi/article/details/80557097

本文介绍如何使用jQuery实现一个表单效果，当输入框获取焦点时，改变样式并清空默认值，失去焦点时，根据是否输入内容决定显示默认值或用户输入。通过判断输入框的value和defaultValue，确保正确处理用户输入和默认值的关系。

要做一个效果如图所示的表单

表单中有三项，当点击每个输入框时，他的颜色会变成蓝色；
每个输入框里都有默认值value，当用户点击输入框时，应该清空原来的默认值，当用户输入完之后，输入框失去焦点时，如果输入框新增了内容，那么就显示内容，如果用户没做修改，那么失去焦点时，输入框应该还显示原来默认的value
要注意，用户点击输入框的时候，如果里面是默认值value才清空，如果是上一次输入的值的话，那就留着，在此基础上改
其实这个效果，如果用placeholder做的话，就简单多了，能完全满足上述要求，但假设我们必须用value做，而value的特点就是当输入框获取焦点时，value值自己不会清空，而且如果用户什么都没写的话，那输入框失去焦点的时候，也不会还原成默认值，就显示空
所以这个例子，我们就是用jQuery来解决value这两个问题
一、第一步 HTML结构

<form action="">
    <filedset>
        <legend>个人基本信息</legend>
        <div>
            <label for="username">用户名：</label>
            <input  id="username"  type="text" value="昵称">
        </div>
        <div>            
            <label for="psd">登录密码：</label>
            <input  id="psd"  type="text" value="密码">
        </div>
        <div>
            <label for="msg">座右铭</label>
            <textarea name="" id="msg" cols="30" rows="5">详细信息</textarea>
        </div>
    </filedset>
</form>

fieldset 和legend是HTML5里的语法，要配套使用的,label 里的for属性值，和哪个元素的id值一样，就表示点击的时候，会触发哪个元素的事件
现在的效果是这样的，因为设了value值，所以输入框里默认值就是value值，当点击输入框时，会在原来文字的基础上添加文字，并不会清空原来的内容，而且如果用户什么都没写的话，那输入框失去焦点的时候，也不会还原成默认值，就显示空

现在，当获取焦点的时候，让我们给输入框加上样式，失去焦点时，去掉样式。样式写在class里，这样就可以用addClass就能获取到了

 <style>
        .focus{
            background:#00ffff;
            border: 2px solid #D02090;
        }
    </style>

<script>
    $(":input").on("focus",function(){
        $(this).addClass("focus");//注意不要带.   不要写成了.focus
    }).on("blur",function(){
        $(this).removeClass("focus");
    })
</script>

现在，假设我们在文本框里啥也不写，当获取焦点的时候，输入框里原来的文本就清空，当失去焦点时，文本又出现

获取input输入框的value属性值的方法是val()
defaultValue 能获得文本框里的默认内容

<script>
    $(":input").on("focus",function(){
        $(this).addClass("focus").val("");
    }).on("blur",function(){
        $(this).removeClass("focus").val(this.defaultValue);
    })
</script>

如果我们在输入框里啥也不写的话，那当失去焦点的时候文本框显示默认值完全OK，but我们肯定是要往输入框里写东西的，如果我们在文本框里写东西了，那么失去焦点的时候，就不能显示默认值，而是我们刚才输入的东东

<script>
    $(":input").on("focus",function(){
        $(this).addClass("focus").val("");
    }).on("blur",function(){
        $(this).removeClass("focus");
        if(!$(this).val()){//判断当前文本框里如果没有后输入内容的话，那就设置成默认的，如果有内容的话，就不设成默认的，而是刚刚输入的
            $(this).val(this.defaultValue);
        }

    })

现在，我们还应该注意的是，当获取焦点的时候，应该判断一下，如果此时文本框里面的值是默认值那我们就清空，但是如果不是默认值而是我们上一次写进去的值，那就不能清空

<script>
    $(":input").on("focus",function(){
        $(this).addClass("focus");
        if(this.value == this.defaultValue){//判断是默认值还是我们输入的值，如果是默认值就清空，不是就留着
            this.value = "";////用原生的value写的，比jQuery的val（）简单
        }
    }).on("blur",function(){
        $(this).removeClass("focus");
        if(!$(this).val()){//判断当前文本框里如果没有后输入内容的话，那就设置成默认的，如果有内容的话，就不设成默认的，而是刚刚输入的
            $(this).val(this.defaultValue);
        }
    })
</script>

综上，全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        .focus{
            background:#00ffff;
            border: 1px solid #ffff00;
        }
    </style>
</head>
<body>
<form action="">
    <filedset>
        <legend>个人基本信息</legend>
        <div>
            <label for="username">用户名：</label>
            <input  id="username"  type="text" value="昵称">
        </div>
        <div>            
            <label for="psd">登录密码：</label>
            <input  id="psd"  type="password" value="密码">
        </div>
        <div>
            <label for="msg">座右铭</label>
            <textarea name="" id="msg" cols="30" rows="5">详细信息</textarea>
        </div>
    </filedset>
</form>
<script>
    $(":input").on("focus",function(){
        $(this).addClass("focus");
        if(this.value == this.defaultValue){//判断是默认值还是我们输入的值，如果是默认值就清空，不是就留着
            this.value = "";//用原生的value写的，比jQuery的val（）简单
        }
    }).on("blur",function(){
        $(this).removeClass("focus");
        if(!$(this).val()){//判断当前文本框里如果没有后输入内容的话，那就设置成默认的，如果有内容的话，就不设成默认的，而是刚刚输入的
            $(this).val(this.defaultValue);
        }
    })
</script>
</body>
</html>