JQuery を使用した空の入力フィールド
Anika Tabassum Era
2024年2月15日
フォームの検証後、データが投稿または保存されたときにページを更新する必要があることがよくあります。 次のユーザーが前のユーザーの資格情報を取得する可能性があるため、これは安全を確保するために必要です。
よく整理された Web ページとフォームでは、適切な送信後に入力フィールドがリセットされるようにします。 残念なことに、この規則でさえ厳密に守られているため、限られたセッション時間が経過すると入力フィールドが無効になり、更新が必要になります。
この記事では、コード例を使用して、入力フィールドをクリアするために広く使用されている方法を学習します。 プラスの点は、実装が簡単であることです。
定義された class & input[type] で入力フィールドをクリアする
ここでは、2つの入力フィールドを設定します。 1つは text タイプで、もう 1つは password タイプです。 そこで、送信を確実にするボタンを作成します。
ボタンがクリックされるたびに、特定の入力フィールドがクリアされます。 それでは、コード フェンスにジャンプしましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
</script>
</html>
出力：
ご覧のとおり、スクリプトでは、jQuery("input[type='text']") が開始され、その後に .val("") が続きます。
これは、入力フィールドが最初は空白で、送信後にリセットされることを示しています。 このコードでは、class="input" を使用して、入力フィールド テキストの後のクリアランスを補完しています。
input[type] を Selector として入力フィールドをクリアする
ここでは、$("input[type="password"]") を $(:password) に置き換えます。 そして、この selector は以前と同じタスクを実行します。 コードスニペットにジャンプしましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<form method="" action="">
<label for="name">Name: <input type="text" name="name" class="input"/></label>
<p></p>
<label for="pass">Password: <input type="password" name="pass"></label>
<p></p>
<input type="submit" value="Submit" class="button"/>
</form>
</body>
<script>
$(document).ready(function() {
$("input[type='text']").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(".input").val("");
});
});
$(document).ready(function() {
$(":password").val("");
$(".button").on("click", function(event) {
event.preventDefault();
$(":password").val("");
});
});
</script>
</html>
出力：
