textarea还剩余字数统计//支持复制粘贴统计字数
作者:佳明妈 来源:jquery特效 2014-10-10 人气:
textarea还剩余字数统计,支持复制粘贴的时候统计字数,下文不适合高手观看,适合不是很熟悉js的朋友看。你也可以直接看演示。
使用方法:
步骤一、
html结构类似如下:
<div class="wordCount" id="wordCount">
<textarea placeholder="textarea还剩余字数统计"></textarea>
<span class="wordwrap"><var class="word">200</var>/200</span>
</div>
注意:结构其实你可以任意构建,只要有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>
步骤三、
textarea还剩余字数统计jquery调用方法如下:
//先选出 textarea 和 统计字数 dom 节点
$(function(){
//先选出 textarea 和 统计字数 dom 节点
var wordCount = $("#wordCount"),
textArea = wordCount.find("textarea"),
word = wordCount.find(".word");
//调用
statInputNum(textArea,word);
});
注意这里的id和类名是和上面的html结构对应的,当然你要根据你的实际情况给改一下。 这里之所以用三行去声明变量,是因为可以少让jquery少查询一次(你要让你的jquery执行的更快,最有效的办法就是尽量减少不必要的查询),同时也更清晰。
注:textarea剩余字数统计完整js演示请在演示中查看源代码或者下载查看。如果你不关心js倒地是怎么写的, 你只管用就行了。
textarea还剩余字数统计//支持复制粘贴统计字数由懒人建站收集整理,您可以自由传播,请主动带上本文链接
懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。
textarea还剩余字数统计//支持复制粘贴统计字数-最新评论