实例详解jquery实现限制textarea输入字数
程序员文章站
2022-06-05 23:24:36
...
jquery怎么实现限制textarea输入的字数呢？本文主要为大家详细介绍了jquery实现限制textarea输入字数的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
有需要的朋友可以参考一下我写的例子，当然如果有误，也希望大家能及时指出来，大家共同学习进步。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea 限制字数</title>
<style>
.container{
position: relative;
width: 730px;
}
.container span{
position: absolute;
bottom: 20px;
right: 30px;
}
</style>
</head>
<body>
<p class="container">
<textarea name="content" id="content" cols="100" rows="10"></textarea>
<span>0/10</span>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function(){
/**
* textarea 限制输入字数
* @param string str 类名或ID
* @param number num 限制输入的字数
*/
function limitImport(str,num){
$(document).on('input propertychange',str,function(){
var self = $(this);
var content = self.val();
if (content.length > num){
self.val(content.substring(0,num));
}
self.siblings('span').text(self.val().length+'/'+num);
});
}
//用法示例
limitImport('#content',10);
})
</script>
</body>
</html>
相关推荐：
实例详解JavaScript如何给Textarea文本框添加行号
html中textarea输入框提示文字必须添加默认内容的完美解决
以上就是实例详解jquery实现限制textarea输入字数的详细内容，更多请关注其它相关文章！
推荐阅读