jquery实现输入字数统计以及限制

最新推荐文章于 2023-11-23 16:52:55 发布

Mchange

最新推荐文章于 2023-11-23 16:52:55 发布

阅读量2.3k

点赞数

分类专栏： jquery 文章标签： jquery function class string input email

本文链接：https://blog.csdn.net/Mchange/article/details/7528677

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Demo：

<html>
<head>
<title>limitWord Demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/limitWord.js"></script>
<script type="text/javascript">
$(function(){
$(".wrap").limitWord(10,"您的输入超出了限制");
});

</script>
<style type="text/css">
#limitedContent{
text-align:left;
}
</style>
</head>
<body>
<div class="wrap">

<input type="text" class="limitedContent">
<span id="msg"></span>
</div>
</body>
</html>

limitWord.js：

/**
* @author mchange
* @description 该控件用于对输入的内容进行字数统计和字数限制。
* @property {int} [limitCount] [限制的字数]
* @property {string} [msg] [超过限制的字数所提示的文字]
* @email：tzzhongwen@gmail.com
* @declare:个人练习，简陋之极，仅供参考
* 2012-05-02
*/
jQuery.fn.extend({
limitWord:function(limitCount,msg){
var flag = 0;
$("#msg").text("您能输入"+limitCount+"个文字");
$(this).children().filter(".limitedContent").bind('keyup input paste',function(){
var contentLength = $(this).val().length;
if(limitCount >= contentLength){
flag = limitCount - contentLength;
$("#msg").text("您还能输入"+flag+"个文字");
}else{
$(this).val($(this).val().substring(0,limitCount));
$("#msg").text(msg);
}

});
}
});

Mchange

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现输入字数统计以及限制

Demo：limitWord Demo$(function(){$(".wrap").limitWord(10,"您的输入超出了限制");});#limitedContent{text-align:left;} -->limitWord.js：/** *
复制链接

扫一扫