一个实用的小功能：输入字数限制【升级版】

    在我们写表单功能的时候，往往都会遇到一个输入字数问题，一般都是针对textarea标签所设置，这里就先上一张效果图：

这是本人原创的脚本写的，所以比较简单，还望勿怪！下面上代码：

首先，你要加载一个jQuery库，然后。。。

HTML：

<p>字数限制：</p>
<div style="...">
    <textarea name="" id="content" style="..."></textarea>
    <span id="limit" style="...">最多能输入<b id="num">10/10</b>字</span>
</div>

刚发现用jQuery实现有俩种方法。。。

方法一：超出字数自动删减

/**
 * 字数限制,针对页面中所有的textarea输入框
 */
$('textarea').keyup(function(){
    inputLimit($(this));
});
$('textarea').keydown(function(){
    inputLimit($(this));
});
inputLimit($('textarea'));//初始化
function inputLimit(obj){
    var limit = 10;
    var num = obj.val().length;
    var rest = limit-num;
    if (rest>=0) obj.parent().find('span').text(rest+'/'+limit);
    if (rest<-1) obj.val(obj.val().substr(0,limit));
}

方法二：达到指定字数不可输入(注：此方法对中文输入无效)

$('textarea').keypress(function(){
	var limit = 10;
	var flag = $(this).val().length;
	rest = limit-flag-1;
	if(rest<0){
		return false;
	}
	$('#num').text(rest);
});

OK，代码分享完毕！效果就是上面那张图，当达到指定字数后，再输入任何内容就都会自动消失。 如果有什么不足之处，还请留言指出！3Q~

没有难的技术，当你弄清它的原理时，你会发现原来如此简单~ 欢迎加群【536501561】讨论

• 上一篇： 计算数组深度
• 下一篇： 新的开始，新的征程！