摘要:獲取表單元素獲取表單的方式目前來說有很多種實現方式,先給大家回顧一下不同方法的獲取表單方式代碼代碼對象提供了屬性該屬性用于獲取當前頁面中所有表單的集合,返回對象,該對象封裝了當前頁面中的所有表單對象代碼代碼直接獲取頁面上所有的集合獲取表單中
獲取表單元素
獲取表單的方式目前來說有很多種實現方式,先給大家回顧一下不同方法的獲取表單方式
//html代碼//JavaScript代碼 Document對象提供了forms屬性
該屬性用于獲取當前HTML頁面中所有表單的集合,返回HTMLCollection對象,該對象封裝了當前HTML頁面中的所有表單對象
//HTML代碼//JavaScript代碼 獲取表單中組件元素
HTMLFormElement對象的elements屬性
該屬性用于獲取指定表單的所有組件的集合
//html代碼//JavaScript代碼 文本框的操作
元素對應DOM中的對象是HTMLInputElement對象,而
文本內容的選擇
HTMLInputElement對象和HTMLTextAreaElement對象都提供了select()方法,該方法用于選擇當前文本框的所有文本內容
//HTML代碼//JavaScript代碼
select事件
select()方法對應著select事件,也就是說:當調用select()方法時,會觸發select事件
//html代碼
selectionStart:表示用戶選中文本內容的開始索引值
selectionEnd:表示用戶選中文本內容的結束索引值的下一個值
//html代碼//JavaScript代碼
設置文本內容
setSelectionRange()方法
作用:設置選擇的文本內容
注意:
焦點在文本內容的最后面:select()方法(全選)
焦點在設置文本內容的范圍內有效
//html代碼//JavaScript代碼
操作剪切版
剪切板功能是經常被忽略,卻很重要的功能,可以增強用戶體驗,方便用戶交互,以下三個事件時剪切板的主要操作
1.copy:在發生復制操作時觸發
2.cut:在發生剪切操作時觸發
3.paste:在發生粘貼操作時觸發
事件對象的clipboardData屬性存儲了由用戶觸發剪切板事件時所影響的帶有MIME類型的數據。注意:IE 8及之前版本的瀏覽器,clipboarData屬性需要通過window對象獲取
var clipboardData=event.clipboardData||window.clipboardData;
該屬性得到的是一個DataTransfer對象,該對象提供了操作數據的常用方法
1.setData()方法:設置數據內容
2.getData()方法:獲取數據內容
3.clearData()方法:刪除與給定類型關聯的數據
//html代碼//JavaScript代碼 下拉列表操作
下拉列表是由
該對象提供的屬性
length:表示當前
該對象提供的方法如下表所示
add(item,[before]):將
item(idx):放回索引值為idx的
remove(index):從當前
HTMLOptionElement對象是
該對象提供的屬性
index:當前
selected:表示當前
text:當前
value:當前
HTML5提供了一組用于表單驗證的API,目前主流瀏覽器對HTML5提供的驗證API支持越來越好
驗證API的屬性
validity: 一個validityState對象,描述元素的驗證狀態
validity.customError:如果元素設置了自定義錯誤,返回true,否則返回false
validity.patternMismatch:如果元素的值不匹配所設置的正則表達式,返回true,否則返回false
validity.rangeOverflow:如果元素的值高于所設置的最大值,返回true,否則返回false
validity.rangeUnderflow:如果元素的值低于所設置的最小值,返回true,否則返回false
validity.stepMismatch:如果元素的值不符合step屬性的規則,返回true,否則返回false
validity.tooLong:如果元素的值超過所設置的最大長度,返回true,否則返回false
validity.typeMismatch:如果元素的值出現語法錯誤,返回true,否則返回false
validity.valueMissing:如果元素設置了required屬性且值為空,返回true,否則返回false
validity.valid:如果元素的值不存在驗證問題,返回true,否則返回false
驗證API的方法
checkValidity():如果元素的值不存在驗證問題,返回true,否則返回false
setCustomValidity(message):為元素添加一個自定義的錯誤消息,如果設置了自定義錯誤消息,則該元素被認為是無效的,并顯示指定的錯誤
提交表單時,會觸發submit事件
表單還提供了submit()方法用于提交表單,使用該方法時允許表單內使用任一普通按鈕即可(并非提交按鈕)
注意:使用submit()方法提交表單不會觸發submit事件
//html代碼//JavaScript代碼
submit()方法
//html代碼//JavaScript代碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97381.html
摘要:在前端頁面中,把用純對象表示,負責顯示,兩者做到了最大限度的分離。的顯示與否和的布爾值有關,還是只關注數據的變化。兩個組件的布爾值通過兩個臨近的按鈕控制,初始值和的結果都是。組件的聲明在組件上,則完全沒有進入生命周期。 開始前說一說 吐槽 首先, 文章有謬誤的地方, 請評論, 我會進行驗證修改。謝謝。 vue真是個好東西,但vue的中文文檔還有很大的改進空間,有點大雜燴的意思,對于怎么...
表單腳本 表單的基礎知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset,服務器能夠處理的字符集,等價于HTML中的accept-charset特性 action,接受請求的URL,等價于HTML中的action特性 elements,表單中所有控件的集合 enctype,請求的編碼類型,等價于HTML中的enctype特性 length,表單中控件的數量 m...
摘要:布爾值,表示當前字段是否被禁用。指向當前字段所屬表單的指針只讀。文本框腳本在中,有兩種方式來表現文本框一種是使用元素的單行文本框,另一種是使用的多行文本框。然后,我們把這個函數指定為每個文本框的事件處理程序。 本章知識架構 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...
摘要:用操作表單和操作是類似的,因為表單本身也是樹。因此,第二種方式是響應本身的事件,在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交,如果,瀏覽器將不會繼續提交,這種情況通常對應用戶輸入有誤,提示用戶錯誤信息后終止提交。 用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種: 文本框,對應的,用于輸入文本; ...
閱讀 1985·2021-11-22 14:45
閱讀 2593·2021-10-12 10:11
閱讀 768·2021-09-22 10:02
閱讀 1197·2019-08-30 15:55
閱讀 1142·2019-08-30 15:54
閱讀 3247·2019-08-30 15:54
閱讀 1181·2019-08-29 17:16
閱讀 3080·2019-08-28 17:55