1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 如何理解JavaScript表單的基礎知識

        時間:2024-08-20 16:14:55 JavaScript 我要投稿
        • 相關推薦

        如何理解JavaScript表單的基礎知識

          HTMLFormElement繼承了HTMLElement,它自己獨有的屬性和方法有:

        如何理解JavaScript表單的基礎知識

          acceptCharset:服務器能夠處理的字符集,等價于HTML的accept-charset特性 action:接收請求的URL,等價于HTML中的action特性。 elements:表單中所有控件的集合(HTMLCollection) enctype:請求的編碼類型 length:表單中控件的數量 method:要發送的HTTP請求類型,通常是get或post name:表單的名稱 reset():將所有表單域重置為默認值 submit():提交表單 target:用于發送請求和接收響應的窗口名稱;

          取得form元素的引用可以是getElementById、也可以是document.forms中數值索引或name值;

          一、提交表單

          提交表單的按鈕有三種:

          

          以上面這種方法提交表單會在瀏覽器請求發送給服務器之前觸發submit事件,這樣就可以驗證表單數據和決定是否允許提交表單,如下面的代碼就可以阻止表單的提交:

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

          另外也可以通過js腳本調用submit()方法提交表單,在調用submit()提交表單不會觸發submit事件。

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

          第一次提交表單后如果長時間沒有回應,用戶會變得不耐煩,往往多次點擊提交按鈕,導致重復提交表單,因此應該在第一次提交表單后就禁用提交按鈕或利用onsubmit事件阻止后續操作。

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

          二、重置表單

          重置表單應該使用input或button:

          

          當用戶單擊重置按鈕重置表單時,會觸發reset事件,可以在必要的時候取消重置操作:

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

          另外也可以通過js腳本調用reset()方法重置表單,在調用reset()方法重置表單時會觸發reset事件。

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

          三、表單字段

          每個表單都有一個elements屬性,該屬性是表單中所有表單(字段)的集合:

          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

          多個表單控件使用一個name(單選按鈕),那么會返回以該name命名的NodeList:

          

        • red

        • yellow

        • blue

          name都是color,在訪問elements["color"]時,返回NodeList:

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

          共有的表單字段屬性

          disabled: 布爾值,表示當前字段是否被禁用; form: 指向當前字段所屬表單的指針:只讀; name: 當前字段的名稱; readOnly: 布爾值,表示當前字段是否只讀; tabIndex: 表示當前字段的切換(tab)序號; type: 當前字段的類型; value: 當前字段被提交給服務器的值。對文件字段來說,這個屬性是只讀的,包含著文件在計算機中的路徑;

          可通過submit事件在提交表單后禁用提交按鈕,但不可以用onclick事件,因為onclick在不同瀏覽器中有“時差”;

          共有表單字段方法

          focus(): 激活字段,使其可以響應鍵盤事件; blur(): 失去焦點,觸發;使用的場合不多;

          可以在偵聽頁面的load事件上添加該focus()方法:

          window.addEventListener("load", function () { document.forms["myForm"].elements["lastName"].focus();});

          需要注意,第一個表單字段是input,如果其type特性為“hidden”,或者css屬性的display和visibility屬性隱藏了該字段,就會導致錯誤。

          在HTML5中,表單中新增加了autofocus屬性,自動把焦點移動到相應字段。

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


        【如何理解JavaScript表單的基礎知識】相關文章:

        對javascript的理解08-08

        關于javascript的基礎知識06-13

        javascript基礎知識大全08-22

        理解JavaScript原型鏈教程09-02

        javascript的閉包概念怎么理解06-15

        javascript面向對象中的對象怎么理解09-02

        淺談javascript中的單線程理解08-16

        如何實現html表單輸入監聽08-09

        有關深入理解JavaScript中的并行處理的介紹10-14

        如何理解經營租賃07-10

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>