Memahami asas JavaScript forms_javascript tips

HTMLFormElement mewarisi HTMLElement, dan sifat dan kaedah uniknya ialah:

• acceptCharset: Set aksara yang boleh dikendalikan oleh pelayan, bersamaan dengan ciri accept-charset HTML
• tindakan: URL untuk menerima permintaan, yang setara dengan ciri tindakan dalam HTML.
• elemen: koleksi semua kawalan dalam bentuk (HTMLCollection)
• enctype: jenis pengekodan diminta
• panjang: bilangan kawalan dalam bentuk
• kaedah: Jenis permintaan HTTP untuk dihantar, biasanya dapatkan atau siarkan
• nama: nama borang
• reset(): Menetapkan semula semua medan borang kepada nilai lalai
• submit(): Hantar borang
• sasaran: nama tetingkap yang digunakan untuk menghantar permintaan dan menerima jawapan
  

Mendapatkan rujukan elemen borang boleh menjadi getElementById, atau boleh menjadi indeks berangka atau nilai nama dalam document.forms

1. Hantar borang

Terdapat tiga jenis butang untuk menghantar borang:

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

Menyerahkan borang dalam kaedah di atas akan mencetuskan acara serah sebelum permintaan penyemak imbas dihantar ke pelayan, supaya data borang boleh disahkan dan borang yang diserahkan boleh ditentukan Sebagai contoh, kod berikut boleh menghalang borang daripada diserahkan:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

Selain itu, anda juga boleh menyerahkan borang dengan memanggil kaedah submit() melalui skrip js. Memanggil submit() untuk menyerahkan borang tidak akan mencetuskan acara serah.

var form = document.getElementById("myForm");
form.submit();

Sekiranya tidak ada jawapan untuk masa yang lama selepas menghantar borang buat kali pertama, pengguna akan menjadi tidak sabar dan sering mengklik butang hantar beberapa kali, menyebabkan penyerahan borang berulang Oleh itu, butang hantar harus dilumpuhkan atau gunakan onsubmit selepas menyerahkan borang untuk kali pertama Acara menghalang tindakan seterusnya.

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

2. Tetapkan semula borang

Tetapkan semula borang hendaklah menggunakan input atau butang:

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

Apabila pengguna mengklik butang set semula untuk menetapkan semula borang, acara set semula akan dicetuskan dan operasi set semula boleh dibatalkan apabila perlu: ​​

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

Selain itu, anda juga boleh menetapkan semula borang dengan memanggil kaedah reset() melalui skrip js Apabila kaedah reset() dipanggil untuk menetapkan semula borang, acara tetapan semula akan dicetuskan.

var form = document.getElementById("myForm");
form.reset();

3. Medan borang

Setiap borang mempunyai atribut elemen, iaitu koleksi semua bentuk (medan) dalam bentuk:

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

Jika berbilang kawalan borang menggunakan satu nama (butang radio), NodeList yang dinamakan selepas nama itu akan dikembalikan:

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

nama semuanya berwarna apabila mengakses elemen["warna"], NodeList dikembalikan:

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

Atribut medan bentuk biasa

• dilumpuhkan: Nilai Boolean, menunjukkan sama ada medan semasa dilumpuhkan
• borang: penunjuk ke borang yang dimiliki oleh medan semasa: baca sahaja;
• nama: nama medan semasa;
baca Sahaja: Nilai Boolean, menunjukkan sama ada medan semasa ialah baca sahaja;
• tabIndex: menunjukkan nombor penukaran (tab) medan semasa;
jenis: jenis medan semasa;
• nilai: Nilai medan semasa yang diserahkan kepada pelayan. Untuk medan fail, atribut ini adalah baca sahaja dan mengandungi laluan fail pada komputer;
• Butang hantar boleh dilumpuhkan selepas menyerahkan borang melalui acara hantar, tetapi acara onclick tidak boleh digunakan kerana terdapat "perbezaan masa" dalam onclick dalam pelayar yang berbeza; Kaedah medan borang kongsi
• 
  fokus():

mengaktifkan medan supaya ia boleh bertindak balas kepada acara papan kekunci;

blur():

hilang fokus dan pencetus jarang digunakan;
• Anda boleh menambah kaedah fokus() pada acara pemuatan halaman mendengar:

  需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

  在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

  autofocus
  如：

  <input type="text" name="lastName" autofocus>
  

  或者检测是否设置了该属性，没有的话再调用focus()方法：

  window.addEventListener("load", function () {
    var form = document.forms["myForm"];
    if (form["lastName"].autofocus !== true) {
      form["lastName"].focus();
    };
  });
  

  共有的表单字段事件

  除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

  blur： 当前字段失去焦点时触发；
  change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
  focus：当前字段获得焦点时触发；
  如：
  

  var form = document.forms["myForm"];
  var firstName = form.elements["firstName"];
  
  firstName.addEventListener("focus", handler);
  firstName.addEventListener("blur", handler);
  firstName.addEventListener("change", handler);
  
  function handler() {
    switch (event.type) {
      case "focus":
        if (firstName.style.backgroundColor !== "red") {
          firstName.style.backgroundColor = "yellow";
  
        };
        break;
      case "blur":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
      case "change":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
    }
  }
  

  以上就是本文的全部内容，希望对大家的学习有所帮助。