フォームをクリア・空にする方法。input・textarea【Javascript】

この記事では、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については、以下の記事で解説しています。

フォーム関連については以下の記事で解説しています。