ホームページ >ウェブフロントエンド >jsチュートリアル >テキストエリアの入力単語数を制限するための jquery 実装の詳細な例
テキストエリアの入力単語数を制限するための jquery 実装の詳細な例
- 小云云オリジナル
- 2017-12-29 10:41:431169ブラウズ
jquery はテキストエリアに入力される単語の数をどのように制限しますか?この記事では主に JQuery でテキストエリアに入力する文字数を制限する方法を詳しく紹介します。興味のある方はぜひ参考にしてください。
困っている友達は、私が書いた例を参照してください。もちろん、間違いがあれば、みんながすぐに指摘して、一緒に学び、進歩できることを願っています。
<!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>関連する推奨事項:
html の 4750256ae76b6b9d804861d8f69e79d3 の使用方法
JavaScript が Textarea テキスト ボックスに行番号を追加する方法の詳細な例
HTML の textarea 入力ボックスのプロンプト テキストデフォルトのコンテンツを追加する必要があります 完璧なソリューション
以上がテキストエリアの入力単語数を制限するための jquery 実装の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。