この記事では、inputやtextareaのテキスト入力フォームをリセットし、空にする方法を解説しています。
フォームを空にする方法
ボタンクリックでクリアする方法
「クリア」ボタンをクリックすると、イベントが発火し、フォームの内容がクリアされます。
実際のデモをまず触ってみましょう。
上記デモのソースコードは下記です。
function clearText() {
var textForm = document.getElementById("form1");
textForm.value = '';
}
function clearTextarea() {
var textareaForm = document.getElementById("form2");
textareaForm.value = '';
}<div>
<input type="text" id="form1"><input type="button" value="クリア" onclick="clearText()" />
</div>
<div>
<textarea id="form2" cols="30" rows="4"></textarea><input type="button" value="クリア" onclick="clearTextarea()" />
</div>value='';でinputやtextareaのフォームに入力されている内容をクリアしています。
誤情報入力でクリアする方法
続いて、誤ったコードを入力したら、入力内容がクリアされ、エラーが表示されるという方法です。
ここでは3文字を超えて入力した場合にエラーが表示されるようにしました。
以下のデモでは、イベントの発火はonchangeで「フィームの値を入力後、フォーカスを外したタイミング」に起こるようにしています。
function errorCheck() {
var form = document.getElementById('form');
if ( form.value.length > 3 ) {
form.value = '';
document.getElementById('errorText').innerHTML = '3文字以内で入力してください。';
}
}<input type="text" id="form" onchange="errorCheck()">
<p id="errorText"></p>誤情報入力でリアルタイムにクリアする方法
onchangeではなく、onkeyupを使うと、3文字を超えて入力したら即座にエラーメッセージが表示されます。
function errorCheck() {
var form = document.getElementById('form');
if ( form.value.length > 3 ) {
form.value = '';
document.getElementById('errorText').innerHTML = '3文字以内で入力してください。';
}
}<input type="text" id="form" onkeyup="errorCheck()">
<p id="errorText"></p>onkeyupについては、以下の記事で解説しています。
フォーム関連については以下の記事で解説しています。
