表单

最新推荐文章于 2020-11-12 11:55:11 发布

木槿晞

最新推荐文章于 2020-11-12 11:55:11 发布

阅读量121

点赞数

分类专栏：课程文章标签： js

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109633776

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

表单

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1">
        <em class="uname">请输入用户名</em><input type="text" class="txt" /><span class="one">文字1</span><br />
    </div>
    <div class="box2">
        <em class="pwd">请输入密码</em><input type="password" class="pword" /><span class="two">文字2</span><br />
    </div>
    <button>点击</button>
</body>
<script>
    //获取
    var uname = document.querySelector(".uname");
    var txt = document.querySelector(".txt");
    var one = document.querySelector(".one");
    var pwd = document.querySelector(".pwd");
    var pword = document.querySelector(".pword");
    var two = document.querySelector(".two");
    var btn = document.querySelector("button");
    // 思路一 给文本设置单击事件
    uname.onclick = function() {
        txt.focus()
    }

    pwd.onclick = function() {
        pword.focus()
    }

    function fn(e1e1, e1e2) {
        e1e1.onclick = function() {
            e1e2.focus()
        }
    }
    fn(uname, txt)
    fn(pwd, pword)

    // 当获取焦点  如果文本框内的内容请输入 则清空文本框的内容
    txt.onfocus = function() {
        if (txt.value == '请输入') {
            txt.value = ""
        }
    }
    txt.onblur = function() {
            if (txt.value == "") {
                txt.value = "请输入"
            }
        }
        // 思路三
    btn.onclick = function() {
        var value = txt.value;
        if (value.length < 6) {
            one.innerHTML = "请输入六位数";
            one.style.color = "red"
        } else {
            one.innerHTML = "输入正确";
            one.style.color = "green"
        }

    }
</script>

</html>

木槿晞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单

表单<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <d
复制链接

扫一扫