高程3總結#第14章表單腳本

Tony 發布于2019-08-23 12:04 / 1497人閱讀

表單腳本 表單的基礎知識

HTMLFormElement有自己獨特的屬性和方法

acceptCharset，服務器能夠處理的字符集，等價于HTML中的accept-charset特性

action，接受請求的URL，等價于HTML中的action特性

elements，表單中所有控件的集合

enctype，請求的編碼類型，等價于HTML中的enctype特性

length，表單中控件的數量

method，要發送的HTTP請求類型，通常是"get"或"post"，等價于HTML的method特性

name，表單的名稱，等價于HTML的name特性

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

submit()，提交表單

target()，用于發送請求和接收響應的窗口名稱，等級與HTML的target特性

提交表單

用戶單擊提交按鈕或者圖像按鈕時，就會提交表單，使用或

阻止表單提交代碼

var form=document.getElelemtById("myForm");
EventUtil.addHandler(form,"submit",function(event){
  //取得事件對象
  event=EventUtil.getEvent(event);
  //阻止默認事件
  EventUtil.preventDefault(event);
})

以編程方式提交表單，不會觸發submit事件，因此調用方法之前要先驗證表單數據

var form=document.getElementById("muForm");
//提交表單
form.submit();

提交表單時，可能出現最大的問題就是重復提交表單，在第一次提交表單之后，如果長時間沒有反應，用戶可能會反復單擊提交按鈕。解決辦法兩個，第一次提交之后就禁用提交按鈕，或者利用onsubmit事件處理程序取消后續的表單提交操作

重置表單

在用戶單擊重置按鈕時，表單會被重置，使用type特性值為reset的或

阻止重置表單的代碼

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
  //取得事件對象
  event = EventUtil.getEvent(event);
  //阻止表單重置
  EventUtil.preventDefault(event);
});

可以通過JavaScript來重置表單

var form=document.getElementById("myForm");
//重置表單
form.reset();

與調用submit()方法不同，調用submit方法會像單擊按鈕一樣觸發reset事件

表單字段

表單字段公有的屬性

disabled，布爾值，表示當前字段是否被禁用

form，指向當前字段所屬表單的指針。只讀

name，當前字段的名稱

readOnly，布爾值，表示當前字段是否只讀

tabIndex，表示當前字段的切換序號

type，當前字段類型，如CheckBox

value當前字段將被提交給服務器的值

公有的表單字段方法

每個表單都有兩個方法，focus()和blur()，其中focus()方法用于將瀏覽器的焦點設置到表單字段，即激活字段，使其可以響應鍵盤事件。在調用blur方法時，并不會把焦點轉移到某個特定的元素上，僅僅是將焦點從調用這個方法的元素上移走

公有的表單字段事件

blur，當前字段失去焦點時觸發

change，對于input和textarea元素，在失去焦點且value值改變時觸發，對于select元素，在選擇選項時觸發

focus，當前字段獲得焦點時觸發

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.style.backgroundColor != "red"){
    target.style.backgroundColor = "yellow";
  }
});
EventUtil.addHandler(textbox, "blur", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
});
EventUtil.addHandler(textbox, "change", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
})

文本框腳本

兩種方式來表示文本框，input和textarea

選擇文本

兩種文本框都支持select()方法，與select()方法對應的是一個select事件，選擇文本框中的文本時，就會觸發select事件

添加兩個屬性：selectionStart和selectionEnd，保存的是基于0的數值，表示選擇文本的范圍

所有文本框都有一個setSelectionRange()方法，接收兩個參數：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引

textbox.value = "Hello world!"
//選擇所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"

過濾輸入

剪切板事件

beforecopy，在發生復制操作前觸發

copy，在發生復制操作時觸發

beforecut，在發生剪切操作前觸發

cut，在發生剪切操作時觸發

beforepaste，在發生粘貼操作前觸發

paste，在發生粘貼操作時觸發

自動切換焦點

(function(){
function tabForward(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.value.length == target.maxLength){
    var form = target.form;
    for (var i=0, len=form.elements.length; i < len; i++) {
      if (form.elements[i] == target) {
        if (form.elements[i+1]){
          form.elements[i+1].focus();
        }
        return;
      }
    }
  }
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5約束驗證API

必填字段

指定required屬性

其他輸入類型

新增email和url等類型

數值范圍

number，range，datetime，datetime-local，date，mouth，week，time等

輸入模式

pattern屬性，這個屬性的值是一個正則表達式，用于匹配文本框中的值

檢測有效性

checkValidty()方法，檢測表單匯總某個字段是否有效，所有表單字段都有這個方法，如果字段有效，返回true，反之返回false

if (document.forms[0].elements[0].checkValidity()){
//字段有效，繼續
} else {
//字段無效
}

customError，如果設置了setCustomValidity，則為true，否則為false

patternMismatch，如果值與指定的pattern屬性不匹配，返回true

rangeOverflow，如果值比max值大，返回true

rangeUnderflow，如果值比min值小，返回true

stepMisMatch，如果max和min之間的步長值不合適，返回true

tooLong，如果值的長度超過了maxlength屬性指定的長度，返回true

typeMismatch，如果值不是mail或url返回的格式，返回true

valid，如果這里的屬性都是false，返回true

valueMissing，如果標注為required的字段中滅有值，返回true

通過設置novalidate屬性，可以告訴表單不進行驗證

選擇框腳本

HTMLSelectElement類型提供的屬性和方法

add(newOption, relOption)，向控件中插入新

multiple，布爾值，表示是否允許多項選擇；等價于 HTML 中的 multiple 特性。

options，控件中所有

remove(index)，移除給定位置的選項。

selectedIndex，基于 0 的選中項的索引，如果沒有選中項，則值為-1。對于支持多選的控件，只保存選中項中第一項的索引。

size，選擇框中可見的行數；等價于 HTML 中的 size 特性

選擇框的value屬性由當前選中項決定，相應規則

如果沒有選中的項，則選擇框的 value 屬性保存空字符串。

如果有一個選中項，而且該項的 value 特性已經在 HTML 中指定，則選擇框的 value 屬性等于選中項的 value 特性。即使 value 特性的值是空字符串，也同樣遵循此條規則。

如果有一個選中項，但該項的 value 特性在 HTML 中未指定，則選擇框的 value 屬性等于該項的文本。

如果有多個選中項，則選擇框的 value 屬性將依據前兩條規則取得第一個選中項的值。

為了便于訪問數據，HTMLOptionElement對象添加下列屬性

index，當前選項在option集合中的索引

label，當前選項的標簽，等價于HTML中的label特性

selected，布爾值，表示當前選項是否被選中，將這個屬性設置為true可以選中當前選項

text，選項的文本

value，選項的值，等價于HTML中的value特性

選擇選項

對于只允許選擇一項的選擇框，訪問選中項的最簡單方式就是使用選擇框的selectedIndex屬性

var selectedOption=selectbox.opitons[selectbox,selectedIndex]

添加選項

添加選項的方式有很多，第一種方式就是使用如下所示的DOM方法

var newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

第二種方式是使用Option構造函數來創建新選項

var newOption=new Option("Option text","Option value");
selectbox.appendChild(newOption);//在IE8及之前版本中有問題

第三種添加新選項的方式是使用選擇框的add()方法

var newOption=new Option("Option text","Option value");
selectbox.add(newOption,undefined);//最佳方案

移除選項

removeChild()方法，移除選項

selectbox.removeChild(selectbox.options[0]);//移除第一個選項

remove()方法，移除選項

selectbox.remove(0);//移除第一個選項

將相應的選項設置為null，移除選項

selectbox.options[0]=null;//移除第一個選項

表單序列化

瀏覽器將數據發送給服務器

對表單字段的名稱和值進行URL編碼，使用&符分隔

不發送禁用的表單字段

只發送勾選的復選框和單選按鈕

不發送type為"reset"和"button"的按鈕

多選選擇框中的每個選中的值多帶帶一個條目

在單擊提交按鈕提交表單的情況下，也會發送提交按鈕，否則不發送提交按鈕，也包括type為"image"的元素

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

高程3總結#第14章表單腳本