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

最新推荐文章于 2024-10-10 09:56:47 发布

技苑丨pengxb_com

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量125

点赞数

分类专栏： Javascript 文章标签： js jquery java html web

本文为pengxb原创文章,转载无需和我联系,但请注明来自技苑【pengxb.com】，欢迎评论留言哦~

本文链接：https://blog.csdn.net/qq_15124723/article/details/111639826

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在我们写表单功能的时候，往往都会遇到一个输入字数问题，一般都是针对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】讨论