JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。

基本の考え方

実装に必要なのは、次の2つのステップだけです。

  • HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する
  • 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（''）を代入する
document.getElementById("id名").value = '';

外部ライブラリは一切不要で、素のHTMLとJavaScriptだけで動作させることができます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="txtBox" placeholder="値を入力してください" />
<button type="button" id="clear" onclick="clearTheTextField()">入力内容をクリア</button>
<script>
    function clearTheTextField(){
        console.log("テキストボックスの値＝" + document.getElementById('txtBox').value);
        document.getElementById('txtBox').value = '';
    }
</script>
</body>
</html>

コードのポイント

  • onclick="clearTheTextField()"：ボタンがクリックされた瞬間に、指定した関数が呼び出されます。
  • console.log(...)：クリア前のテキストボックスの値をコンソールに出力するので、処理前後の変化を開発者ツールで確認できます。
  • document.getElementById('txtBox').value = ''：IDが「txtBox」の要素の値に空文字列を代入することで、フィールドの中身を空にしています。

プログラムの実行方法

上記のコードを任意のファイル名（例：index.html）で保存してください。VS Codeを使用している場合は、保存したファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上ですぐに動作を確認できます。

動作確認（出力結果）

ブラウザでページを開くと、テキストボックスと「入力内容をクリア」ボタンが表示されます。

JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

まず、テキストボックスに任意の値を入力してみましょう。

JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

その状態で「入力内容をクリア」ボタンをクリックすると、入力していた値が消え、テキストボックスが空になります。

JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

補足：別の実装アプローチ

<form>タグ内に入力欄がある場合は、form.reset()メソッドを使うことでも初期状態に戻せます。また、onclick属性ではなくaddEventListener('click', 関数)でイベントリスナーを登録する書き方も広く使われており、HTMLとJavaScriptを分離できるため保守性が高まります。

  1. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  2. Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法

    この記事では、AndroidアプリのWebViewに表示したHTMLページ内のボタンがクリックされたことを、JavaScriptインターフェースを介してネイティブ側で検出する方法を解説します。 WebView上のHTMLとAndroidアプリは、addJavascriptInterface()を使うことで相互に連携できます。HTML側のボタンクリックイベントをJava側のメソッドで受け取り、Toastでメッセージを表示するまでの流れを、手順を追って見ていきましょう。 ステップ1：新しいプロジェクトを作成する Android Studioを起動し、メニューから「File」→「New Projec