1

フォームの textarea フィールドに文字カウントを実装しています。私は現在、このコードを使用して文字ステートメントを数えて書いているjQueryを持っています:

$("#textarea").keyup(function(){
    $("#count").text("Characters left: " + (500 - $(this).val().length));
});

ただし、JavaScript の何が問題なのか知りたいです。

var textarea = document.forms["form"].elements.textarea;

textarea.addEventListener("keypress", textareaLengthCheck, false);

function textareaLengthCheck(textarea) {
var length = textarea.length;
console.log(length);
var charactersLeft = 500 - length;
console.log(charactersLeft);
count.innerHTML = "Characters left: " + charactersLeft;
}

変数の宣言とイベント リスナーは、jQuery ドキュメント対応関数内にあります。その場合、イベントリスナーまたは関数に対して何が間違っているのかわかりません。

ありがとう

4

4 に答える 4

3

変数textareaは関数のスコープに存在しません。thisキーワードで参照できます

function textareaLengthCheck() {
    var length = this.value.length;
    var charactersLeft = 500 - length;
    var count = document.getElementById('count');
    count.innerHTML = "Characters left: " + charactersLeft;
}
于 2012-12-29T22:46:39.003 に答える
2

コード内のハンドラーには、イベントに関連する要素が渡されません。イベントオブジェクトが渡されました。パラメーターを使用して関数を宣言したため、外側のスコープで宣言された変数が非表示になります。

問題はここにあります：

function textareaLengthCheck(textarea) {

関数定義に「textarea」という名前のパラメーターを含めました。それが関数内のシンボルの意味であるため、「textarea」とも呼ばれる外部変数はその関数内では表示されません。

<textarea>Firefox、Chrome、および Safari ではすべて、値の長さが正しくないことが報告されることに注意してください。これらのブラウザーは、すべての明示的な改行 (つまり、ユーザーが "Enter" キーを押した場所) を 1 文字としてテキスト領域の長さを報告します。実際、ブラウザーが a を含むフォームを投稿すると<textarea>、明示的な改行はすべて 2 文字のシーケンス (キャリッジ リターンとライン フィード) に変換されます。したがって、サーバーでのオーバーフローを防ぐために最大長を課している場合、改行を 2 文字として扱わないと機能しません。これを行うには、値の長さを取得し、文字列内の改行の数を追加する必要があります (正規表現などで見つかります)。

于 2012-12-29T22:43:49.770 に答える
0

jqueryを使っているので

プラグインはどうですか

http://keith-wood.name/maxlength.html

$("#limited-textarea").maxlength({
    max: 400
});
于 2013-04-01T13:38:30.150 に答える