js 表单事件

最新推荐文章于 2024-07-28 20:27:10 发布

大闸蟹~

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量115

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/YCHH1/article/details/125659918

版权

javascript 前端开发语言

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item {
            width: 250px;
        }
    </style>
</head>

<body>
    <form action="/regist" target="_blank" id="form">
        <div class="item">
            <label for="">同户名:
                <input type="text" name="username" id="username" value="">
            </label>
        </div>

        <div class="item">
            <label for="">密码:
                <input type="text" name="search" id="search" value="">
            </label>
        </div>

        <div class="item">介绍:
            <textarea name="" id="des" cols="30" rows="10"></textarea>
            <p align="right">当前输入了 <strong id="count">0</strong>个字</p>
        </div>

        <div class="item">
            <input type="submit" id="submit">
            <input type="reset" id="reset">
        </div>
    </form>

    <script>

        function $(id) {
            return document.getElementById(id)
        }

        // 获取相关的元素
        var form = $("form");
        var uName = $("username");
        var search = $("search");
        var des = $("des");
        var count = $("count");
        var submit = $("submit");

        // onfocus 获取焦点
        uName.onfocus = function () {
            console.log("获取焦点");
            this.style.backgroundColor = "#e3e3e3"
        }

        // onblue 失去焦点
        uName.onblur = function () {
            console.log("失去焦点...");
        }

        // onchange  数据发生改变
        search.onchange = function () {
            console.log("数据发生改变了");
        }

        // oninput  正在输入
        des.oninput = function () {
            count.innerHTML = this.value.length
        }

        // submit 和 reset  两个按钮不能触发
        // 对应的  onsubmit  和 onreset 事件
        // submit.onsubmit = function(){
        //     console.log("提交成功了");
        // }


        // onsubmit 和 onreset  事件 只能通过 form 这个标签改变
        form.onsubmit = function(){
            console.log("提交成功..");
        }


    </script>

</body>

</html>