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

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

技苑|web开发

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

首先,你要加载一个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~

技苑
请先登录后发表评论
  • 最新评论
  • 总共0条评论
  • © 2016-2018 技苑 版权所有 ICP证:鄂ICP备15021999号-2
  • 联系邮箱:master@pengxb.com