私はこのようなテキストエリアを持っています:
<textarea tabindex="1" maxlength='2000' id="area"></textarea>
私はjqueryでこのtextareaを見ます:
$("#area").keypress(function (e) {
if (e.keyCode != 13) return;
var msg = $("#area").val().replace("\n", "");
if (!util.isBlank(msg))
{
send(msg);
$("#area").val("");
}
});
send()は、リターンキーが押された場合、およびメッセージが空白でない場合、または行スペースのみが含まれている場合に、メッセージをサーバーに送信します。
問題:メッセージを送信した後、textareaがクリアされません。最初のページの読み込み時に、textareaは空です。メッセージが送信されると、テキスト領域に1行の空白行があり、それを取り除く方法がわかりません。
問題は、Enterキーの押下が抑制されておらず、通常のブラウザの動作(つまり、改行の追加)を実行していることです。追加 return false
これを防ぐためにキープレスハンドラーの最後まで。
$("#area").keypress(function (e) {
if (e.keyCode != 13) return;
var msg = $("#area").val().replace(/\n/g, "");
if (!util.isBlank(msg))
{
send(msg);
$("#area").val("");
}
return false;
});
トーマス、e.preventDefault();エンターキーにのみ適用する条件付きでラップする必要があります。
// Restrict ENTER.
if (e.keyCode == '13') { e.preventDefault(); }
関数全体は次のようになります(コメント付き):
// Key Press Listener Attachment for #area.
$("#area").keypress( function (event) {
// If the key code is not associated with the ENTER key...
if (event.keyCode != 13) {
// ...exit the function.
return false;
} else {
// Otherwise prevent the default event.
event.preventDefault();
// Get the message value, stripping any newline characters.
var msg = $("#area").val().replace("\n", "");
// If the message is not blank now...
if (!util.isBlank(msg)) {
// ...send the message.
send(msg);
// Clear the text area.
$("#area").val("");
}
}
} );
Event.preventDefault()関数を使用して、デフォルトのイベントアクションが発生しないようにする必要があります。この場合は、入力文字を追加します。
$("#area").keypress(function (e) {
e.preventDefault();
if (e.keyCode != 13) return;
var msg = $("#area").val().replace("\n", "");
if (!util.isBlank(msg))
{
send(msg);
$("#area").val("");
}
});