成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 表單腳本——“表單的基礎(chǔ)知識”的注意要點

chnmagnus / 1136人閱讀

摘要：處理表格和提交等等重置表單重置表單應(yīng)該使用或當用戶單擊重置按鈕重置表單時，會觸發(fā)事件，可以在必要的時候取消重置操作另外也可以通過腳本調(diào)用方法重置表單，在調(diào)用方法重置表單時會觸發(fā)事件。在中，表單中新增加了屬性，自動把焦點移動到相應(yīng)字段。

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

acceptCharset:服務(wù)器能夠處理的字符集，等價于HTML的accept-charset特性

action：接收請求的URL，等價于HTML中的action特性。

elements：表單中所有控件的集合（HTMLCollection）

enctype：請求的編碼類型

length：表單中控件的數(shù)量

method:要發(fā)送的HTTP請求類型，通常是get或post

name：表單的名稱

reset():將所有表單域重置為默認值

submit():提交表單

target:用于發(fā)送請求和接收響應(yīng)的窗口名稱；

取得form元素的引用可以是getElementById、也可以是document.forms中數(shù)值索引或name值；

提交表單

提交表單的按鈕有三種：

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

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

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

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

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

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

重置表單應(yīng)該使用input或button：

當用戶單擊重置按鈕重置表單時，會觸發(fā)reset事件，可以在必要的時候取消重置操作：

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

另外也可以通過js腳本調(diào)用reset()方法重置表單，在調(diào)用reset()方法重置表單時會觸發(fā)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);
// 取得表單中包含的字段的數(shù)量
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: 當前字段被提交給服務(wù)器的值。對文件字段來說，這個屬性是只讀的，包含著文件在計算機中的路徑；

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

共有表單字段方法

focus(): 激活字段，使其可以響應(yīng)鍵盤事件；

blur(): 失去焦點，觸發(fā)；使用的場合不多；

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

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

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

在HTML5中，表單中新增加了autofocus屬性，自動把焦點移動到相應(yīng)字段。

autofocus

如：

或者檢測是否設(shè)置了該屬性，沒有的話再調(diào)用focus()方法：

window.addEventListener("load", function () {
    var form = document.forms["myForm"];
    if (form["lastName"].autofocus !== true) {
        form["lastName"].focus();
    };
});
共有的表單字段事件

除了支持鼠標鍵盤更改和HTML事件之外，所有的表單字段都支持下列3個事件：

blur： 當前字段失去焦點時觸發(fā)；

change：input元素和textarea元素，在它們失去焦點且value值改變時觸發(fā)；select元素在其選項改變時觸發(fā)（不失去焦點也會觸發(fā)）；

focus：當前字段獲得焦點時觸發(fā)；

如：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78511.html

相關(guān)文章

  • 表單驗證（-）

    摘要：這樣我們就有機會驗證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。下面代碼會阻止表單提交取得時間對象阻止默認事件注意以這種方式提交表單，不會觸發(fā)事件。 這里是表單驗證的第一課：主要講授有關(guān)表單的基礎(chǔ)知識。關(guān)于表單驗證的更多知識可以參考《javascript高級程序設(shè)計》之第14章：表單腳本 1.表單事件 submit():提交表單reset():將所有表單域重置為默認值 （1）.取得form元...

    cppowboy 評論0 收藏0

  • JavaScript 表單腳本——“表單序列化”的注意要點

    摘要：瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器對表單字段的名稱和值進行編碼，使用和號分隔不發(fā)送禁用的表單字段只發(fā)送勾選的復(fù)選框和單選按鈕不發(fā)送為和的按鈕多選框中每個選中的值單獨一個條目在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕。否則不發(fā)送提交按鈕。 瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器： 對表單字段的名稱和值進行URL編碼，使用和號（&）分隔 不發(fā)送禁用的表單字段 只發(fā)送勾選的復(fù)選框和單選按鈕 不發(fā)送t...

    BlackHole1 評論0 收藏0

  • 高程3總結(jié)#第14章表單腳本

    表單腳本 表單的基礎(chǔ)知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset，服務(wù)器能夠處理的字符集，等價于HTML中的accept-charset特性 action，接受請求的URL，等價于HTML中的action特性 elements，表單中所有控件的集合 enctype，請求的編碼類型，等價于HTML中的enctype特性 length，表單中控件的數(shù)量 m...

    Tony 評論0 收藏0

  • JavaScript 表單腳本——“選擇框腳本”的注意要點

    摘要：為了便于訪問，對象添加了下列屬性當前項在集合中的索引當前選項的標簽，等價于中的標簽布爾值，表示當前選項是否被選中。 選擇框通過select和option元素創(chuàng)建的。除了共有的屬性和方法外，下面的是特有的屬性和方法： add(newOption,relativeOption): 向控件中插入新元素，其位置相關(guān)項relativeOption之前 multiple: 布爾值，表示是否允許多...

    vvpvvp 評論0 收藏0

  • JavaScript 表單腳本——“文本框腳本”的注意要點

    摘要：屬性可以設(shè)置文本框的初始值。特性則是用于指定文本框內(nèi)可以接受的最大字符數(shù)。與這個方法對應(yīng)的事件，在選擇了文本框中的文本時事件觸發(fā)。如阻止用戶選擇要調(diào)用之前或之后立即將焦點設(shè)置到文本框。 在HTML中，有兩種方式來表現(xiàn)文本框： 一種是使用input元素的單行文本，另一種是使用textarea的多行文本框。 使用input方式，必須添加type，設(shè)置為text。 size特性，可以指定文...

    kk_miles 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<