亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript 表單腳本

PrototypeZ / 1369人閱讀

摘要:文本框獲得焦點(diǎn)時(shí),選中其中所有的文本思路利用焦點(diǎn)事件事件,在文本框獲得焦點(diǎn)時(shí),利用其方法選中所有文本。自動(dòng)切換焦點(diǎn)思路利用事件檢測用戶輸入新字符后,文本框內(nèi)的字符串是否已經(jīng)達(dá)到最大長度,若達(dá)到最大長度,則將焦點(diǎn)切換至下一個(gè)文本框。

JavaScript 表單腳本

通過 document.forms 可以獲得一個(gè)包含當(dāng)前頁面中所有表單的集合

HTMLFormElement 接口

下面是這個(gè)接口常用的屬性和方法:

action:接受請求的 URL,等價(jià)于 HTML 中的 action 特性。

elements:返回表單中所有控件(或表單字段)的集合(HTMLFormControlsCollection)。需要注意的是,其中不包括 type 等于 image 的 input 元素。

enctype:請求的編碼類型,HTML 提供了3種編碼類型

application/x-www-form-urlencoded:默認(rèn)的編碼類型

multipart/form-data:在上傳文件時(shí)使用(

text/plain:在 HTML5 中引進(jìn),但是不建議使用

【參考】:What does enctype="multipart/form-data" mean?

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

method:要發(fā)送的 HTTP 請求類型(get 或 post),等價(jià)于 HTML 中的 method 特性

name:表單的名稱,等價(jià)于 HTML 中的 name 特性

noValidate:是否驗(yàn)證表單,若它的值為 true,則表示禁止驗(yàn)證表單

reset():將該表單下的所有表單域重置為默認(rèn)值

submit():提交表單

重置或提交表單

在 HTML 中,重置表單的方式有以下 2 種:





用戶點(diǎn)擊重置按鈕重置表單時(shí),會在重置表單之前觸發(fā) reset 事件。利用這個(gè)事件,我們可以取消不必要的重置操作。

當(dāng)然,也可以通過 JavaScript 調(diào)用 reset() 方法來重置表單,這個(gè)方法也會像單擊重置按鈕一樣觸發(fā) reset 事件。

var form1 = document.getElementById("form1");
form1.reset();

在 HTML 中,提交表單的方式有以下 3 種:








以上面這 3 種方式提交表單時(shí),瀏覽器會在將請求發(fā)送給服務(wù)器之前觸發(fā) submit 事件,這樣,我們就可以利用這個(gè)事件對表單進(jìn)行驗(yàn)證,并據(jù)以決定是否提交表單。

注意:submit 事件只能在 form 元素上觸發(fā),不能在提交按鈕上觸發(fā)!

Note that submit is fired only on the form element, not the button or submit input.

我們也可以通過 JavaScript 的 submit() 方法來提交表單,但是不會觸發(fā) submit 事件。因此注意在使用此方法之前先驗(yàn)證表單。

var form1 = document.getElementById("form1");
form1.submit();

See the Pen submit or reset event for form by percy (@percy507) on CodePen.


防止重復(fù)提交表單

在有提交按鈕的表單中,我們防止表單重復(fù)提交的方法有 2 種:1. 利用 submit 事件來禁用表單提交按鈕,2. 利用 onsubmit 事件處理程序取消后續(xù)的表單提交操作

表單控件共有的屬性和方法

除了

元素之外,所有表單控件都擁有相同的一組屬性:

disabled:布爾值,表示當(dāng)前控件是否被禁用

form:只讀,指向當(dāng)前控件所屬的表單

name:當(dāng)前控件的名稱

readOnly:布爾值,表示當(dāng)前控件的值是否只讀,若為 true,則控件的 value 是不能被修改的

type:當(dāng)前控件的類型

value:當(dāng)前控件將被提交給服務(wù)器的值

共有的方法:focus()blur()。

HTML5 中新添加了一個(gè) autofocus 屬性。設(shè)置這個(gè)屬性的表單控件會自動(dòng)獲取焦點(diǎn)。

HTMLInputElement 接口

通用屬性

formAction:重寫 form 元素的 action 屬性

formEncType:重寫 form 元素的 enctype 屬性

formMethod:重寫 form 元素的 method 屬性

labels: A list of

type="text"

maxLength:設(shè)置文本框可接受的最大字符數(shù)

size:設(shè)置文本框中可以顯示的字符數(shù)

value:設(shè)置文本框的初始值

placeholder:設(shè)置文本框的提示內(nèi)容

type="radio" 或 type="checkbox"

checked:檢測 type 為 radio 或 checkbox 的表單控件是否被選中

除了 type="text" 的文本框,還有一種文本框