textarea还剩余字数统计(jQuery要用jquery-1.10.2.min.js)

来源：互联网发布：单片机做成mp3 编辑：程序博客网时间：2024/06/08 03:32

textarea还剩余字数统计，支持复制粘贴的时候统计字数，下文不适合高手观看，适合不是很熟悉js的朋友看。你也可以直接看演示。

使用方法：

步骤一、
html结构类似如下：

<div class="wordCount" id="wordCount">    <textarea placeholder="textarea还剩余字数统计"></textarea>    <span class="wordwrap"><var class="word">200</var>/200</span></div>1
2
3
4
1
2
3
4

注意：结构其实你可以任意构建，只要有textarea和展示总字数的节点即可。具体的妙用看下面的js解说部分 **步骤二、** 通常为了不让js阻塞页面加载，会把js文件放到页面最后，这样会让js晚一点加载到。如果没有使用jquery请引入jquery文件，如下，我引用的是新浪的cdn加速的jquery文件

<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>1
1

**步骤三、** textarea还剩余字数统计jquery调用方法如下：

//先选出 textarea 和 统计字数 dom 节点  $(function(){        //先选出 textarea 和 统计字数 dom 节点        var wordCount = $("#wordCount"),            textArea = wordCount.find("textarea"),            word = wordCount.find(".word");        //调用        statInputNum(textArea,word);    });1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

注意这里的id和类名是和上面的html结构对应的，当然你要根据你的实际情况给改一下。这里之所以用三行去声明变量，是因为可以少让jQuery少查询一次（你要让你的jquery执行的更快，最有效的办法就是尽量减少不必要的查询），同时也更清晰。

注：textarea剩余字数统计完整js演示请在演示中查看源代码或者下载查看。如果你不关心js倒地是怎么写的，你只管用就行了。

源代码：

<!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>

阅读全文

0 0