ホームページ
ウェブフロントエンド
jsチュートリアル
ASP.NET jQuery 例 13 オリジナル jQuery テキストボックス文字数制限プラグイン TextArea Counter_jquery
ウェブフロントエンド
jsチュートリアル
ASP.NET jQuery 例 13 オリジナル jQuery テキストボックス文字数制限プラグイン TextArea Counter_jquery
ASP.NET jQuery 例 13 オリジナル jQuery テキストボックス文字数制限プラグイン TextArea Counter_jquery
文字数制限
テキストボックス
•最大入力文字長を制限できます
•文字のインターセプト速度を設定できます
•カスタマイズ可能なプロンプト情報のテキストスタイル (カスタマイズされたテキストの内容を改善できます)
このプラグインは、英語の文字の長さをカウントし、漢字は同じです。
早速、プラグイン コードの詳細を示します。具体的な実装の詳細は、コード内で既にコメントされています。
コードをコピー コードは次のとおりです。
; (function ($) {
$.fn.extend({
textAreaCount: function (options) {
var $ textArea = this;
options = $.extend({
maxlength: 140, // 500 に初期化された最大入力長変数を定義します
speed: 15, // 文字を削除する速度変数を定義します
msgstyle: "font -family:Arial;font-size:small;color:Gray;small;text-align:right;margin-top:3px;", // プロンプト情報表示スタイル
msgNumStyle: "font -weight:bold;color :Gray;font-style:italic;font-size:larger;" // プロンプト メッセージ内の残りの長さのスタイル
}, options);
var $msg = $(" ");
// テキスト ボックスの背後にプロンプト情報コンテナを動的にロードします
$textArea.after($msg);
// キープレス イベントを追加 現在のコンテンツをまだ入力できるかどうかを判断するために使用されます
$textArea.keypress(function (e) {
// 8 は Backspace ボタン、46 は削除ボタンです
// 現在の入力文字の長さが 0 で、キー値が 8 と 46 ではない場合、操作は実行されません
if ($textArea.val().length >= options.maxlength && e.that ! = '8' && e.that != '46 ') {
e.preventDefault();
return;
}
}).keyup(function () { // キーアップイベントを追加します。残りの入力単語を計算して表示するには、
var curlength = this.value.length;
$msg.html("").html("var init = setInterval(function () {
// 入力内容が設定された最大長より大きい場合、コンテンツは設定された速度で自動的に傍受されます
if ($textArea. val().length > options.maxlength) {
$textArea.val($textArea.val().substring(0, options) .maxlength));
$msg.html("").html ("" options.maxlength "words も入力できます") ;
}
else {
clearInterval(init);
}
},
}).bind("contextmenu", function (e) / / マウスの右ボタンを無効にして、マウスによるテキスト操作を無効にします
return false >})
// 初回ロード時に文字長プロンプト情報を入力できるようになりました
$ msg.html("").html(" " options.maxlength "Word");
return this; 🎜>}
});
})(jQuery);
上記のコードを直接コピーして、
プラグインの使用方法を見てみましょう。まず、コードは次のとおりです。
コードをコピーします コードは次のとおりです:
ページ構造 コード:
コードをコピー コードは次のとおりです: