js限定文本框里面的输入字数

最新推荐文章于 2023-09-24 23:51:11 发布

进阶的小牛

最新推荐文章于 2023-09-24 23:51:11 发布

阅读量187

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/99887160

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

限定文本框里面的输入字数

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

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

        .box {
            width: 500px;
            margin: 0 auto;
            padding-top: 100px;
        }

        .div {
            /* 清除掉文本域的默认边框颜色 */
            outline: none;
            width: 500px;
            height: 300px;
            border: 1px solid red;
            float: right;
            /* 文本域禁止拖拽属性 */
            resize: none;
        }

        p {
            border: 1px solid rebeccapurple;
            width: 150px;
            height: 20px;
            float: right;
        }

        button {
            float: right;
            background-color: orange;
            color: white;
            padding: 10px, 20px;
            width: 60px;
            height: 30px;
            ;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="pp">已经输入0个字</p>
        <form action="">
            <textarea name="" class="div" cols="30" rows="10" value=""></textarea>
        </form>
        <button>发布</button>
    </div>
    <script>
        var div = document.querySelector(".div");
        var pp = document.querySelector(".pp");
        div.oninput = function () {
            var le = div.value.length;
            console.log(le);
            if (le <= 140) {
                div.style.color = "black";
                pp.innerHTML = "已经输入" + le + "个字"
            } else if (le > 140 && le <= 180) {
                div.style.color = "red";
                pp.innerHTML = "还可以输入" + (180 - le) + "个字"
            } else if (le > 180) {
                // alert("你已经超过最大限制了");
                div.value = div.value.substring(0, 180);
                pp.innerHTML = "还可以输入0个字"
            }
        }   
    </script>
</body>

</html>

在这里插入图片描述