textarea还剩余字数统计，支持复制粘贴的时候统计字数
Posted 星期九
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了textarea还剩余字数统计，支持复制粘贴的时候统计字数相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title> <style type="text/css"> body,a{ font-size: 14px; color: #555;;} .wordCount{ position:relative;width: 600px; } .wordCount textarea{ width: 100%; height: 100px;} .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;} .wordCount .word{ color: red; padding: 0 4px;;} </style> </head> <body> <h1>textarea还剩余字数统计</h1> <p>textarea还剩余字数统计，支持复制粘贴的时候统计字数</p> <div class="wordCount" id="wordCount"> <textarea placeholder="textarea还剩余字数统计"></textarea> <span class="wordwrap"><var class="word">200</var>/200</span> </div> <span id="clock"></span> <script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script> <script> $(function(){ //先选出 textarea 和 统计字数 dom 节点 var wordCount = $("#wordCount"), textArea = wordCount.find("textarea"), word = wordCount.find(".word"); //调用 statInputNum(textArea,word); }); /* * 剩余字数统计 * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var> */ function statInputNum(textArea,numItem) { var max = numItem.text(), curLength; textArea[0].setAttribute("maxlength", max); curLength = textArea.val().length; numItem.text(max - curLength); textArea.on(‘input propertychange‘, function () { var _value = $(this).val().replace(/\n/gi,""); numItem.text(max - _value.length); }); } </script> <!--下面只是说明与程序代码无关--> <div style="width:95%;padding:50px; font-size:14px; line-height:1.75;"> <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br> <a href="http://www.51xuediannao.com/">懒人建站-jquery特效-建站素材 http://www.51xuediannao.com/</a><br/> <span>我们为您提供- <a href="http://www.51xuediannao.com/html+css/">html+css</a>， <a href="http://www.51xuediannao.com/js/">jquery特效</a>， <a href="http://www.51xuediannao.com/js/">JS代码</a>， <a href="http://www.51xuediannao.com/js/texiao/">网页特效</a>， <a href="http://www.51xuediannao.com/js/nav/">导航菜单</a>， <a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a>， <a href="http://www.51xuediannao.com/sucai/">建站素材</a> <a class="link" title="大学生假期网上兼职挣点零花钱" href="http://www.51xuediannao.com/yumenba/wsjianzhi.html">大学生假期网上兼职挣点零花钱</a> </span> <span>懒人建站只收录实用和能提高用户体验的代码</span> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计。</span> </div> </body> </html>
以上是关于textarea还剩余字数统计，支持复制粘贴的时候统计字数的主要内容，如果未能解决你的问题，请参考以下文章