1、文本域输入字数，当字数到140个时，变红色，同时提示为还可以输入多少个，最多只能输入180个字符 1、已输入2字 2、到140时，提示还可以输入多少个 3、最多只能输入180个

最新推荐文章于 2023-01-19 10:57:36 发布

枫思然

最新推荐文章于 2023-01-19 10:57:36 发布

阅读量759

点赞数

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

本文链接：https://blog.csdn.net/qq_38318589/article/details/99891719

版权

js 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

文本域输入字数，当字数到140个时，变红色，同时提示为还可以输入多少个，最多只能输入180个字符

要求：

1、已输入2字
2、到140时，提示还可以输入多少个
3、最多只能输入180个

<!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>文本域</title>
    <style>
        .bigbox {
            width: 500px;
            height: 300px;
            margin: 0 auto;
        }

        p {
            margin: 0;
            font-size: 15px;
        }

        .p {
            float: left;
            color: rgb(25, 190, 231);
            font-weight: 580;
        }

        #pi {
            float: right;
        }

        #tet {
            padding: 0 10px;
            float: left;
            width: 478px;
            height: 180px;
            /* lh */
            resize: none;
            /* 禁止拖拽文本域  */
            outline: none;
            /* 清除默认边框线 */
            border: 1px solid #FF8140;
        }

        #btn {
            float: right;
            width: 80px;
            margin-top: 10px;
            height: 28px;
            background-color: #ff8140;
            border: none;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <form action="">
            <p class="p">有什么新鲜事想告诉大家？</p>
            <p id="pi">已输入0字</p>
            <textarea id="tet" placeholder="分享你的故事~" name="tet"  maxlength="180"></textarea>
            // maxlength 表单元素的属性，最大长度  
            
            <button id="btn">发布</button>
        </form>
    </div>

    <script>

        var pi = document.getElementById("pi");
        var tet = document.getElementById("tet");
        var btn = document.getElementById("btn");

        tet.oninput = function () {
            var str = tet.value;
         //   console.log(str)
       //     if(str.length > 180){
        //        str = str.substring(0,180);
        //        tet.value = str;
         //       pi.innerHTML = "已输入" + str.length + "字"
         //      alert("最多只能输入180个字符！")
           // }
           // else
            if (str.length > 140) {
                tet.style.color = "#ff8140";
                pi.innerHTML = "你还能输入" +(180 - str.length) + "字"
            } else {
                tet.style.color = "#333";
                pi.innerHTML = "已输入" + str.length + "字"
            }
            console.log(str.length)
        }
    </script>
</body>

</html>

效果如图所示：
在这里插入图片描述

枫思然

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1、文本域输入字数，当字数到140个时，变红色，同时提示为还可以输入多少个，最多只能输入180个字符 1、已输入2字 2、到140时，提示还可以输入多少个 3、最多只能输入180个

文本域输入字数，当字数到140个时，变红色，同时提示为还可以输入多少个，最多只能输入180个字符要求：1、已输入2字2、到140时，提示还可以输入多少个3、最多只能输入180个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
复制链接

扫一扫