textarea 文本框实现右下角展现动态字数

最新推荐文章于 2024-04-30 08:34:04 发布

huayang183

最新推荐文章于 2024-04-30 08:34:04 发布

阅读量4.5k

点赞数

分类专栏： vue

FZY

本文链接：https://blog.csdn.net/qq_18671415/article/details/119704334

版权

vue 专栏收录该内容

73 篇文章

订阅专栏

该博客介绍了如何使用CSS定义一个具有特定样式的文本框，包括边框、圆角、高度、字体大小等属性，并展示了HTML的textarea元素用法。同时，通过JavaScript的setLength函数实现输入字数的实时显示，限制输入不超过200字，提供了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本框CSS

.textarea-style{
    border:1px solid #000001;
    border-radius:5pt;
    height:60pt;
    font-size:10pt;
    margin-bottom: 2vh;
    width:100%;
    color: #000001;
    overflow-x:hidden;
    text-indent:20px
}

HTML
<textarea id="handledMsg" maxlength="200" cols="70" rows="5" class="textarea-style"
          placeholder="请输入处理方法,不超过200字" onkeyup="setLength(this,200,'wordsLength');"></textarea>
<span id="wordsLength" style="position:absolute; right:5px; bottom:3vh;font-size:12px; color:#BDCADA">0/200</span>

JS
function setLength(obj,maxlength,id){
    var num=maxlength-obj.value.length;
    var leng=id;
    if(num<0){
        num=0;
    }
    document.getElementById(leng).innerHTML=num+"/200";
}