Home > Article > Web Front-end > Detailed example of jquery implementation to limit the number of input words in textarea
Detailed example of jquery implementation to limit the number of input words in textarea
- 小云云Original
- 2017-12-29 10:41:431085browse
How does jquery limit the number of words entered in textarea? This article mainly introduces in detail the method of using jquery to limit the number of words entered in a textarea. It has certain reference value. Interested friends can refer to it. I hope it can help you.
Friends in need can refer to the examples I wrote. Of course, if there are any mistakes, I hope everyone can point them out in time so that we can learn and make progress together.
<!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>Related recommendations: How to use
#html's4750256ae76b6b9d804861d8f69e79d3
Example details How to add line numbers to the Textarea text box in JavaScript
The above is the detailed content of Detailed example of jquery implementation to limit the number of input words in textarea. For more information, please follow other related articles on the PHP Chinese website!