十四章 表單腳本

第十四章 表單腳本

表單的基礎(chǔ)知識(shí)

基礎(chǔ)知識(shí)

  • 在javascript中，表單對(duì)應(yīng)的是 HTMLForm-Element類型，HTMLFormElement繼承自HTMLElement。在其他元素屬性之外還包含獨(dú)有屬性和方法。

    • acceptCharset: 服務(wù)器能夠處理的字符集；等價(jià)于HTML中的accept-charset特性。
    • action::接收請(qǐng)求的URL；等價(jià)于HTML中的action特性。
    • elements: 表單中所有控制的集合(HTMLCollection)。
    • enctype: 請(qǐng)求的編碼類型；等價(jià)于HTML中的enctype特性。
    • length:表單中控件的數(shù)量。
    • method:要發(fā)送HTTP請(qǐng)求類型，等價(jià)于HTML中的method特性。
    • name:表單的名稱；等價(jià)于HTML的name特性
    • reset():將所有表單域重置為默認(rèn)值。
    • submit():提交表單。
    • target:用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱；等價(jià)于HTML的target特性。

  • document.forms:含有頁(yè)面所有表單的數(shù)組。

    • 可以通過(guò)索引訪問(wèn)如果表單含有name，也可以使用對(duì)象取值的形式通過(guò)name獲取表單的數(shù)據(jù)。

      • <body>
    <form name="test1">
        <input type="text">
    </form>
    <form name="test2">
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
</body>
<script>
    let formDom = document.forms
    console.log(formDom['test1'] === formDom[0]) // true
</script>

      • 取值方式document.forms[index] ||document.forms[form-name]

提交表單
  • submit()方法
    • 將表單數(shù)據(jù)發(fā)送至服務(wù)器
    • <input type='submit'> || <button type='submit'>都可以提交表單，瀏覽器會(huì)在將請(qǐng)求發(fā)送之前觸發(fā)submit，所以通過(guò)dom元素提交表單我們可以在submit事件中做預(yù)處理。
    • 但通過(guò)js中document.forms[0].submit()此時(shí)不會(huì)觸發(fā)submit事件，所以我們需要在使用之前做預(yù)處理。
  • 阻止默認(rèn)事件
    • 在submit事件中通過(guò)event時(shí)間對(duì)象可以阻止默認(rèn)行為event.preventDefault()
重置表單
  • reset()方法
    • 將該表單所有表單域重置為默認(rèn)值。
    • 與submit類似將input || button元素的type = "reset"后使用。
    • 不同點(diǎn)在于不論是dom元素 || js操作reset()方法都會(huì)觸發(fā)reset事件。
表單元素字段

  • 訪問(wèn)表單中的元素,首先獲取dom,或可以從document.forms中選取某個(gè)表單，接著可以訪問(wèn)此表單中的elements屬性，該屬性中包含表單內(nèi)的所有元素。

  • 共有的表單字段屬性

    • 除了<fieldset>元素外

    • disabled:布爾值，表示當(dāng)前字段是否被禁用。

    • form:指向當(dāng)前字段所屬表單的指針；只讀。

    • name:當(dāng)前字段的名稱。

    • readOnly:布爾值，表示當(dāng)前字段是否只讀。

    • tabIndex:表示當(dāng)前字段的切換tab序號(hào)。

    • type:當(dāng)前字段類型，如checkbox/radio

    • value:當(dāng)前字段將被提交給服務(wù)器的值。對(duì)文件字段來(lái)說(shuō)，這個(gè)屬性是只讀的，包含著文件在計(jì)算機(jī)中的路徑。

    • 避免重復(fù)提交

      • 可以在一次提交后，給元素設(shè)置disabled屬性。
      • 需要注意的是onclick在點(diǎn)擊事件中如果阻止了默認(rèn)事件，由于不同瀏覽器的觸發(fā)時(shí)差問(wèn)題，click有可能會(huì)在submit事件前觸發(fā)。這樣將不會(huì)在觸發(fā)submit導(dǎo)致提交不成功。

  • 共有的表單字段方法

    • foucs():獲取焦點(diǎn)

    • blur():失去焦點(diǎn)

    • H5新增字段

      • autofocus 自動(dòng)獲取焦點(diǎn)

      • <input type="text" autofocus>

      • 對(duì)于非表單元素，如果將其tabIndex屬性設(shè)置為-1,然后在調(diào)用focus()方法，也可以讓這些元素獲取焦點(diǎn)。

  • 共有的表單字段事件

    • blur:失去焦點(diǎn)時(shí)觸發(fā)。
    • change:對(duì)于<input> || <textarea>元素，在他們失去焦點(diǎn)并且value值改變時(shí)觸發(fā)。<select>選項(xiàng)改變時(shí)觸發(fā)。
    • focus:獲取焦點(diǎn)時(shí)觸發(fā)。

文本框腳本

基礎(chǔ)知識(shí)
  • <input>
    • size:字段控制輸入框顯示多少個(gè)字符
    • value:字段設(shè)置初始值
    • maxlength:字段設(shè)置最大字符數(shù)
  • <textarea>
    • rows:字段指定文本框字符行數(shù)，
    • cols:指定文本框的字符列數(shù)
    • 初始值:寫在文本框標(biāo)簽中
選擇文本

  • 上述兩種文本框都支持select()方法，用于選擇文本框中的所有文本。

  • 選擇select事件

    • 用戶選中文本，和調(diào)用select()方法會(huì)觸發(fā)select事件。

  • 取消選擇文本

    • H5新增
    • selectionStart & selectionEnd表示用戶選擇文本的起始和結(jié)束索引。

  • 選擇部分文本

    • H5新增
      • setSelectionRange()方法接收兩個(gè)參數(shù)，起始和結(jié)束索引。
      • 在使用setSelectionRange()方法的時(shí)候，需要獲取焦點(diǎn)。
    • IE8以及更早版本
      • createTextRange()方法創(chuàng)建一個(gè)范圍，并將其放在恰當(dāng)?shù)奈恢蒙希谑褂?code>moveStart()和moveEnd()這兩個(gè)范圍方法將范圍移動(dòng)到位。在調(diào)用這兩個(gè)方法之前，還必須使用collapse()方法將范圍折疊到文本框的開始位置。此時(shí)moveStart()將范圍的起點(diǎn)和終點(diǎn)移動(dòng)到了相同的位置，只要再給moveEnd()傳入要選擇的字符總數(shù)即可。最后一步，就是使用范圍的select()方法選擇文本。
過(guò)濾輸入

  • 通過(guò)正則表達(dá)式匹配需要屏蔽的字符，然后使用event.preventDefault(event)取消默認(rèn)事件的形式可進(jìn)行屏蔽。

  • 操作剪貼板

    • H5新增最早有IE支持
    • beforecopy || beforecut || beforepaste針對(duì)文本框的上下文菜單（預(yù)期將發(fā)生剪貼板事件）的情況下觸發(fā)
    • copy || cut || paste在上下文菜單選擇，或觸發(fā)鍵盤組合按鍵時(shí)，所有瀏覽器都會(huì)觸發(fā)他們。
    • beforecopy:復(fù)制操作前觸發(fā)
    • copy:復(fù)制操作時(shí)觸發(fā)
    • beforecut:剪切操作前觸發(fā)
    • cut:剪切操作觸發(fā)
    • beforepaste:粘貼操作前觸發(fā)
    • paste:粘貼操作觸發(fā)
    • clipboardData:
      • IE中存放在window中
      • 其他存放在剪切事件對(duì)象event中
      • getData():獲取剪切板數(shù)據(jù)
        • 接收一個(gè)參數(shù)MIME(text/plain) || URL
      • setData():設(shè)置剪切板數(shù)據(jù)
        • 接收兩個(gè)參數(shù)
          • MIME(text/plain) || URL
          • 要設(shè)置的數(shù)據(jù)字符串
          • 返回值true || false
自動(dòng)切換焦點(diǎn)
  • 首先要知道用戶已經(jīng)輸入完畢，然后拿到下一個(gè)表單元素調(diào)用focus()
HTML5約束驗(yàn)證API

  • required:必填字段

  • 其他輸入類型:type=email & type=url

  • 數(shù)值范圍:number || range || datetime || datetime-local || date || month || week || time || min || max || setp

    • input.setpUp():加法，接收一個(gè)參數(shù) 數(shù)值，修改當(dāng)前值，不傳默認(rèn) +1
    • input.setpDown():減法，接收一個(gè)參數(shù) 數(shù)值，修改當(dāng)前值，不傳默認(rèn)-1

  • 輸入模式

    • H5新增
      • pattern:這個(gè)屬性值為一個(gè)正則表達(dá)式，進(jìn)行約束輸入內(nèi)容

  • 檢測(cè)有效

    • checkValidity():檢查表單中某個(gè)元素是否有效
    • 返回值Boolean
    • 如果需要檢測(cè)整個(gè)表單
      • doucment.forms[0].checkValidity()
    • 屬性：無(wú)效原因
      • customError:如果設(shè)置了setCustomValidity()則返回true
      • patternMisMatch:輸入值與pattern的正則表達(dá)式不匹配則返回true
      • rangeOverflow:如果值比max大,則返回true
      • rangeUnderflow:如果值比min小,則返回true
      • stepMisMatch:如果min 和 max之間的步長(zhǎng)值不合理，返回true
      • toolong:長(zhǎng)度超過(guò)maxlength返回true
      • typeMismatch:不符合mail || url要求的格式，返回true
      • valid:如果其他值都為false，則返回true
      • valueMissing:標(biāo)注為required的值為空，則返回true

  • 禁止校驗(yàn)

    • novalidate:強(qiáng)制表單不校驗(yàn)

      • <form mothod="post" action="text.php" novalidate></form>

    • formnovalidate:指定了屬性的type = "submit"的元素，阻止觸發(fā)校驗(yàn)

選擇框腳本

基礎(chǔ)知識(shí)
  • 選擇框時(shí)通過(guò)<select>|| <option>元素創(chuàng)建的，HTMLSelectElement類型還提供了下列屬性和方法
  • add(newOption, relOption):向控件插入新<option>元素，其位置在相關(guān)項(xiàng)relOption之前
  • multiple:布爾值，表示是否支持多項(xiàng)選擇;等價(jià)于HTML中的multiple特性
  • options:控件中所有<option>元素的HTMLCollection
  • remove(index):移除給定位置的選項(xiàng)
  • selectedIndex:基于0的選中項(xiàng)索引，沒(méi)有選中項(xiàng)則為-1,對(duì)于支持多選的控件，只保存選中項(xiàng)中第一項(xiàng)的索引。
  • size:選擇框中可見的行數(shù)。
  • value屬性 規(guī)則如下
    • 如果沒(méi)有選中項(xiàng)，則value為空字符串
    • 如果有一個(gè)選中項(xiàng)，而且該項(xiàng)的value特性已經(jīng)在HTML中指定，則選擇框的value屬性等于選中項(xiàng)的value特性。即使value特性的值是空字符串，也同樣遵循此條規(guī)則。
    • 如果有一個(gè)選中項(xiàng)，但該項(xiàng)的value特性在HTML中未指定，則選擇框的value屬性等于該項(xiàng)的文本。
    • 如果有多個(gè)選中項(xiàng)，則選擇框的value屬性將依據(jù)前兩條規(guī)則取得第一個(gè)選中項(xiàng)的值。
  • <option>
    • HTMLOptionElement對(duì)象
      • index:當(dāng)前選項(xiàng)在options集合中的索引
      • label:當(dāng)前選項(xiàng)的標(biāo)簽；等價(jià)于HTML中的label特性
      • selected:布爾值，表示當(dāng)前選項(xiàng)是否被選中。將這個(gè)屬性設(shè)置為true,可以選中當(dāng)前選項(xiàng)。
      • text:選項(xiàng)的文本
      • value:選項(xiàng)的值
    • change:事件
      • 選中選項(xiàng)時(shí)觸發(fā)，不同于其他表單元素被修改且失去焦點(diǎn)后觸發(fā)
選擇選項(xiàng)

  • 獲取某一項(xiàng)的引用，然后將其selected屬性設(shè)置為true

  • select['要修改的選擇框dom'].options[索引].selected = true
添加選項(xiàng)
  • 通過(guò)創(chuàng)建<option>元素添加至<select>元素中
    • let ops = document.createElement('option')
    • selectDom.appendChild(ops)
  • 通過(guò)Option構(gòu)造函數(shù)創(chuàng)建<option>元素
    • let ops = new Option('Option text', 'Option value')
    • selectDom.appendChild(ops)
  • 通過(guò)<select>的add()方法添加 推薦
    • let ops = new Option('Option text', 'Option value')
    • selectDom.add(ops, undefined)
      • 第二個(gè)參數(shù)傳入undefined兼容所有瀏覽器，并添加至<select>中的末尾
移除選項(xiàng)
  • 通過(guò)dom0級(jí)移除
    • selectDom.removeChild(selectDom.options[0])
  • 通過(guò)<select>的remove()方法移除
    • selectDOm.remove(0)
  • 通過(guò)將option對(duì)象賦值為null
    • 在dom出現(xiàn)之前的使用方式
    • selectDom.options[0] = null
移動(dòng)和重排選項(xiàng)
  • 最適合的方法appendChild || insertBefore
  • 規(guī)則
    • 當(dāng)傳入已存在的元素時(shí)，會(huì)先從父節(jié)點(diǎn)中移除該元素。在把他添加到指定的位置
    • 移動(dòng)和移除選項(xiàng)會(huì)重置每一個(gè)選項(xiàng)的index屬性

表單序列化

基礎(chǔ)知識(shí)
  • 瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)流程
    • 對(duì)表單字段的名稱和值進(jìn)行URL編碼，使用和號(hào)&分隔
    • 不發(fā)送禁用的表單字段
    • 只發(fā)送勾選的復(fù)選框和單選按鈕
    • 不發(fā)送type為reset || button的按鈕
    • 多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目
    • 在單擊提交按鈕提交表單的情況下，也會(huì)發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。也包括type為image的<input>元素
    • <select>元素的值，就是選中的<option>元素的value特性的值。如果<option>元素沒(méi)有value特性，則是<option>元素的文本值。
  • <fieldset> 不需要參與序列化，而且它也沒(méi)有type屬性
  • DOM使用hasAttribute()方法檢測(cè)vaule是否存在
  • IE使用specified屬性檢測(cè)value是否存在

富文本編輯

基礎(chǔ)知識(shí)
  • 這一技術(shù)的本質(zhì)，就是在頁(yè)面中嵌入一個(gè)包含空HTML頁(yè)面的iframe。通過(guò)設(shè)置designMode屬性，這個(gè)空白的HTML頁(yè)面可以被編輯，而編輯對(duì)象則是該頁(yè)面<body>元素的HTML代碼。designMode屬性有兩個(gè)可能的值off 默認(rèn)值 || on。在設(shè)置為on時(shí)，整個(gè)文檔都會(huì)變成可以編輯（顯示插入符號(hào)）。
    • 在頁(yè)面完全加載后才能設(shè)置designMode屬性。
使用contenteditable屬性`

  • 可以在元素中直接設(shè)置

    • <div contenteditable></div>
<!-- 可以將任何元素開啟可編輯模式 -->

  • 通過(guò)dom操作設(shè)置

    • let div = document.getElementById('editor')
    • div.contenteditable = true
操作富文本
  • 富文本主要的交互方式，是使用document.execCommand()
    • 傳遞三個(gè)參數(shù)
      • 要執(zhí)行的命令名稱
      • 表示瀏覽器是否應(yīng)該為當(dāng)前命令提供用戶界面的一個(gè)布爾值
        • 為了兼容瀏覽器此參數(shù)應(yīng)該始終傳入false
      • 執(zhí)行命令必須的一個(gè)值，默認(rèn)為null
富文本選區(qū)
  • 此處介紹大量API以及屬性 詳細(xì)請(qǐng)參照Page439 - 441
表單與富文本

  • 此處介紹大量API以及屬性 詳細(xì)請(qǐng)參照Page441 - 443

  • 基礎(chǔ)知識(shí)

    • 由于富文本不屬于表單字段，所以在提交時(shí)應(yīng)該單獨(dú)獲取數(shù)據(jù)
    • frams[富文本名稱].document.body.innerHTML
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本章主要介紹：表單、文本框驗(yàn)證與交互、使用其他表單控制。這一章會(huì)繼續(xù)沿用上一章 封裝的 EventUtil 對(duì)象(...
    了凡和纖風(fēng)閱讀 382評(píng)論 0贊 0
  • 表單基礎(chǔ)知識(shí) 在HTML中，表單是使用form元素來(lái)表示的，JS中對(duì)應(yīng)的是HTMLFormElement類型。它同...
    More_5897閱讀 385評(píng)論 0贊 1
  • 1.有的瀏覽器會(huì)在觸發(fā)表單的submit事件之前觸發(fā)click事件，而有的瀏覽器則相反。對(duì)于先觸發(fā)click事件的...
    張果果閱讀 159評(píng)論 0贊 0
  • 表單的基礎(chǔ)知識(shí) 文本框腳本 選擇框腳本 表單序列化 富文本編輯 表單的基礎(chǔ)知識(shí) 用戶單擊提交按鈕或圖像按鈕時(shí)，就會(huì)...
    jluemmmm閱讀 253評(píng)論 0贊 0
  • 表單的基礎(chǔ)知識(shí) HTMLFormElement有自己獨(dú)特的屬性和方法 acceptCharset，服務(wù)器能夠處理的...
    萌萌噠的作者閱讀 212評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容