<!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; 600px; }
.wordCount textarea{ 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(/
/gi,"");
numItem.text(max - _value.length);
});
}
</script>
<!--下面只是说明与程序代码无关-->
<div style="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>