分享一个简单的统计并限制textarea字数的小方法

JoviChin

下面是效果


我用的是AUI前端框架，你也可以自定义自己的样式

CSS

1. .wordCount textarea {
   
2.             width: 100%;
   
3.             height: 100px;
   
4.         }
   
5.         .wordCount .wordwrap {
   
6.             position: absolute;
   
7.             right: 0;
   
8.             bottom: -1rem;
   
9.             color: #BBBBBB;
   
10.             font-size:0.6rem;
    
11.         }
    
12.         .wordCount .word {
    
13.             padding: 0 0.2rem;
    
14.         }

复制代码

HTML

1. <li class="aui-list-item-noborder aui-margin-b-15 wordCount" id="wordCount">
   
2.             <textarea name="desc" id="desc" placeholder="描述你的问题"></textarea>
   
3.             <span class="wordwrap"><var class="word">200</var>/200</span>
   
4.         </li>

复制代码

JS

1. $(function() {
   
2.     //先选出 textarea 和 统计字数 dom 节点
   
3.     var wordCount = $("#wordCount"),
   
4.         textArea = wordCount.find("textarea"),
   
5.         word = wordCount.find(".word");
   
6.     //调用
   
7.     statInputNum(textArea, word);
   
8. });
   
9. /*
   
10. * 剩余字数统计
    
11. * 注意 最大字数只需要在放数字的节点那里直接写好即可 如：<var class="word">200</var>
    
12. */
    
13. function statInputNum(textArea, numItem) {
    
14.     var max = numItem.text(),
    
15.         curLength;
    
16.     textArea[0].setAttribute("maxlength", max);
    
17.     curLength = textArea.val().length;
    
18.     numItem.text(max - curLength);
    
19.     textArea.on('input propertychange', function() {
    
20.         numItem.text(max - $(this).val().length);
    
21.     });
    
22. }

复制代码

以上，完毕。

川哥哥

这个有点用

xvetang

有用。      

jixiang01

这个怎么用到apicloud里！！！！！！

冯翘楚

jixiang01 发表于 2018-9-20 18:24
这个怎么用到apicloud里！！！！！！

引入JQ剩下正常写就好

得呤

学习一下

辉哥_0808

感谢分享

yarnell

这个不用jq，只用api.js的话应该怎么写？

52yaoer

很好的分享