Adakah terdapat butang set semula dalam JavaScript?

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang boleh digabungkan dengan HTML dan CSS untuk menjadikan laman web dan aplikasi Web lebih interaktif dan dinamik. Walau bagaimanapun, apabila menggunakan JavaScript, anda mungkin menghadapi keperluan untuk menetapkan semula borang, yang merupakan keperluan biasa. Dalam artikel ini, kami akan meneroka butang tetapan semula dalam JavaScript dan cara menggunakannya.

Pertama sekali, perlu jelas bahawa elemen borang adalah salah satu elemen terpenting dalam borang HTML Ia digunakan untuk menangkap data yang dimasukkan pengguna dan menyerahkannya kepada pelayan untuk diproses. Dalam elemen borang, anda boleh menambah butang, termasuk butang, butang hantar, butang set semula, dsb. Antaranya, butang set semula digunakan untuk menetapkan semula semua data dalam bentuk kepada nilai lalai atau nilai kosong.

Terdapat beberapa cara untuk melaksanakan kefungsian butang set semula dalam JavaScript. Di bawah ini kami akan memperkenalkan kaedah ini satu demi satu.

1. Gunakan kaedah tetapan semula elemen borang

Dalam JavaScript, elemen borang mempunyai kaedah terbina dalam dipanggil reset(), yang boleh digunakan untuk menetapkan semula semua input dalam medan borang dan pilihan. Contohnya:

<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>

Dalam kod di atas, elemen borang mengandungi medan input dan kotak senarai juntai bawah, serta butang jenis set semula. Apabila pengguna mengklik butang set semula, kaedah set semula() elemen borang akan dicetuskan, menetapkan semula semua medan input dan pilihan dalam borang kepada nilai lalai atau kosongnya. Pada masa yang sama, kod JavaScript di atas juga mendengar acara tetapan semula borang Apabila borang ditetapkan semula, mesej akan dicetak ke konsol.

2. Bina borang baharu dan gantikan borang lama

Cara lain untuk melaksanakan fungsi butang set semula ialah membina borang baharu dan menggantikan borang Lama. Contohnya:

<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>

Dalam kod di atas, elemen borang mengandungi medan input dan kotak senarai lungsur, serta butang jenis butang. Apabila pengguna mengklik butang set semula, fungsi resetForm() dipanggil, di mana elemen borang lama pertama kali diperoleh, kemudian elemen borang baharu dicipta menggunakan kaedah createElement() dan elemen borang baharu diganti menggunakan replaceChild( ) kaedah Elemen bentuk lama. Ini bersamaan dengan menetapkan semula keseluruhan borang.

Perlu diambil perhatian bahawa apabila menggunakan kaedah ini, beberapa atribut borang, pengendali acara dan maklumat lain mungkin hilang, jadi ia hanya sesuai untuk tetapan semula bentuk mudah.

3. Tetapkan semula nilai elemen borang secara manual

Cara terakhir untuk melaksanakan fungsi butang set semula ialah dengan menetapkan semula nilai elemen borang secara manual. Contohnya:

<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>

Dalam kod di atas, elemen borang mengandungi medan input dan kotak senarai lungsur, serta butang jenis butang. Apabila pengguna mengklik butang set semula, fungsi resetForm() dipanggil, yang mula-mula memperoleh semua medan input dan kotak senarai juntai bawah elemen borang, dan merentasi setiap elemen untuk menetapkan semula nilainya kepada nilai lalai atau nilai nol . Khususnya, untuk kotak teks dan kotak kata laluan, tetapkan nilainya kepada kosong untuk butang radio dan kotak semak, tetapkan status pilihannya kepada tidak ditandakan untuk kotak senarai juntai bawah, tetapkan item pilihannya kepada Item pertama.

Perlu diambil perhatian bahawa jika borang mengandungi jenis elemen borang lain, seperti medan teks, medan kata laluan, medan imej, dsb., ia perlu ditetapkan semula mengikut situasi tertentu.

Ringkasnya, terdapat banyak kaedah dalam JavaScript untuk menetapkan semula borang Antaranya, kaedah reset() yang disertakan dengan elemen borang adalah yang paling mudah dan langsung. Tetapi jika anda memerlukan lebih banyak fleksibiliti dalam menyesuaikan fungsi set semula, anda boleh menggunakan dua kaedah yang terakhir. Tidak kira kaedah yang digunakan, keperluan untuk menetapkan semula borang boleh dicapai dengan mudah dan memberikan pengalaman yang lebih baik untuk pengguna.

Atas ialah kandungan terperinci Adakah terdapat butang set semula dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!