JavaScriptにリセットボタンはありますか?

JavaScript は広く使用されているプログラミング言語であり、HTML および CSS と組み合わせることで、Web サイトや Web アプリケーションをより対話的かつ動的にすることができます。ただし、JavaScript を使用する場合、フォームをリセットする必要が生じる場合があります。これは一般的な要件です。この記事では、JavaScript のリセット ボタンとその使用方法について説明します。

まず第一に、form 要素は HTML フォームの最も重要な要素の 1 つであることを明確にする必要があります。この要素は、ユーザーが入力したデータを取得し、処理のためにサーバーに送信するために使用されます。 form 要素には、ボタン、送信ボタン、リセット ボタンなどのボタンを追加できます。このうちリセットボタンは、フォーム内のすべてのデータをデフォルト値または空の値にリセットするために使用されます。

JavaScript では、リセット ボタン機能を実装する方法がいくつかあります。以下では、これらの方法を一つずつ紹介していきます。

1. フォーム要素のリセット メソッドを使用する

JavaScript では、フォーム要素には、reset() と呼ばれる組み込みメソッドがあり、これを使用してすべての要素をリセットできます。フォームフィールドとオプションへの入力。例:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="reset" value="Reset">
</form>

<script>
  var myForm = document.getElementById("myForm");
  myForm.addEventListener("reset", function(event){
    console.log("表单已重置");
  });
</script>

上記のコードでは、form 要素には入力フィールド、ドロップダウン リスト ボックス、およびリセット タイプ ボタンが含まれています。ユーザーがリセット ボタンをクリックすると、フォーム要素のreset() メソッドがトリガーされ、フォーム内のすべての入力フィールドとオプションがデフォルト値または空の値にリセットされます。同時に、上記の JavaScript コードはフォームのリセット イベントもリッスンし、フォームがリセットされると、メッセージがコンソールに出力されます。

2. 新しいフォームを構築して古いフォームと置き換える

リセット ボタン機能を実装するもう 1 つの方法は、新しいフォームを構築して古いフォームと置き換えることです。例:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var oldForm = document.getElementById("myForm");
    var newForm = document.createElement("form");
    newForm.id = "myForm";
    oldForm.parentNode.replaceChild(newForm, oldForm);
  }
</script>

上記のコードでは、form 要素に入力フィールドとドロップダウン リスト ボックス、およびボタン タイプのボタンが含まれています。ユーザーがリセット ボタンをクリックすると、resetForm() 関数が呼び出され、最初に古いフォーム要素が取得され、次に createElement() メソッドを使用して新しいフォーム要素が作成され、replaceChild() メソッドを使用して新しいフォーム要素が置き換えられます。 ) メソッド 古い形式の要素。これはフォーム全体をリセットすることと同じです。

このメソッドを使用すると、一部のフォーム属性、イベント ハンドラー、その他の情報が失われる可能性があるため、単純なフォームのリセットにのみ適していることに注意してください。

3. フォーム要素の値を手動でリセットする

リセット ボタン機能を実装する最後の方法は、フォーム要素の値を手動でリセットすることです。例:

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var inputs = document.getElementById("myForm").getElementsByTagName("input");
    for(var i=0; i<inputs.length; i++) {
      switch(inputs[i].type) {
        case "text":
          inputs[i].value = "";
          break;
        case "checkbox":
        case "radio":
          inputs[i].checked = false;
          break;
        default:
          break;
      }
    }
    
    var selects = document.getElementById("myForm").getElementsByTagName("select");
    for(var i=0; i<selects.length; i++) {
      selects[i].selectedIndex = 0;
    }
  }
</script>

上記のコードでは、form 要素に入力フィールドとドロップダウン リスト ボックス、およびボタン タイプのボタンが含まれています。ユーザーがリセット ボタンをクリックすると、resetForm() 関数が呼び出されます。この関数は、まずフォーム要素のすべての入力フィールドとドロップダウン リスト ボックスを取得し、各要素を走査して値をデフォルト値または null 値にリセットします。 . .具体的には、テキスト ボックスとパスワード ボックスの値を空に設定し、ラジオ ボタンとチェック ボックスの選択状態をオフに設定し、ドロップダウン リスト ボックスの選択項目を最初の項目に設定します。

フォームにテキスト フィールド、パスワード フィールド、画像フィールドなどの他のタイプのフォーム要素が含まれている場合は、特定の状況に応じてリセットする必要があることに注意してください。

要約すると、JavaScript にはフォームをリセットするためのメソッドが多数ありますが、その中でも、form 要素に付属する replace() メソッドが最も単純で直接的です。ただし、リセット機能をより柔軟にカスタマイズする必要がある場合は、後の 2 つの方法を使用できます。どの方法を使用しても、フォームのリセットの必要性を簡単に実現でき、ユーザーにより良いエクスペリエンスを提供できます。

以上がJavaScriptにリセットボタンはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。