《JavaScript高級程式設計》筆記：表單腳本（十四）

来源:https://www.cnblogs.com/moqiutao/archive/2019/01/08/10232934.html
-Advertisement-
Play Games

表單的基礎知識 在HTML中，表單是由<form>元素來表示的，而在JS中，表單對應的是HTMLFormElement類型。HTMLFormElement繼承了HTMLElement，因而與其它HTML元素具有相同的預設屬性。不過HTMLFormElement也有下列獨有的屬性和方法。 accept ...


表單的基礎知識

在HTML中，表單是由<form>元素來表示的，而在JS中，表單對應的是HTMLFormElement類型。HTMLFormElement繼承了HTMLElement，因而與其它HTML元素具有相同的預設屬性。不過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特性。

取得form元素引用的幾種方式，方式一：

var form = document.getElementById('form1');

方式二：

通過document.forms可以取得頁面中的所有表單。在這個集合中，可以通過索引或者name值來取得特定的表單。

var firstForm = document.forms[0]; //取得頁面中的第一個表單
var myForm = document.forms['form1']; //取得頁面中名為"form1"的表單

提交與重置表單

阻止表單提交：

var form = document.getElementById('myForm');

//使用13章封裝的EventUtil對象
EventUtil.addHandler(form,'submit',function(event){
    
    //取得事件對象
    event = EventUtil.getEvent(event);
    
    //阻止預設事件(取消表單的提交)
    event.preventDefault(event);
})

提交與重置：

var form = document.getElementById('myForm');
//提交表單
form.submit();

//重置表單
form.reset();

表單欄位

每個表單都有elements屬性，該屬性是所有表單中所有元素的集合。

var form = document.getElementById('myForm');

//取得表單中的第一個欄位
var field1 = form.elements[0];

//取得名為"textbox1"的欄位
var field2 = form.elements['textbox1'];

//取得表單中包含的欄位的數量
var fieldCount = form.elements.length;

如果有多個表單控制項都在使用同一個name（比如單選按鈕），那麼就會返回以該name命名的一個nodeList。

表單欄位共有的屬性和方法：

  • disabled：布爾值，表示當前欄位是否被禁用。
  • form：指向當前欄位所屬表單的指針；只讀。
  • name：當前欄位的名稱。
  • readOnly：布爾值，表示當前欄位是否只讀。
  • tabIndex：表示當前欄位的切換（tab）序號。
  • type：當前欄位的類型，如“checkbox”、“radio”等。
  • value：當前欄位被提交到伺服器的值。

除了form屬性之外，可以通過JS動態修改其它任何屬性。

var form = document.getElementById('myForm');
var field = form.elements[0];

//修改value屬性
field.value = "Another value";

//檢查form屬性的值
console.log(field.form == form);

//把焦點設置到當前欄位
field.focus();

//禁用當前欄位
field.disabled = true;

//修改type屬性(不推薦，但對<input>來說是可行的)
field.type ="checkbox";

避免多次提交表單，在第一次點擊提交表單後，設置提交按鈕disabled為true，如下代碼：

var form = document.getElementById('myForm');

//避免多次提交表單
EventUtil.addHandler(form,"submit",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    
    //取得提交按鈕
    var btn = target.elements['submit-btn'];
    
    //禁用它
    btn.disabled = true;
    
    //後面代碼省略
})

每個表單欄位都有兩個方法：focus()和blur()。例如，在頁面載入完成後，把焦點轉移到表單中的第一個欄位，如下代碼：

EventUtil.addHandler(window,"load",function(event){
    document.forms[0].elements[0].focus();
})

註意，如果第一個表單欄位是<input>元素，且它的type特性的值為“hidden”，那麼以上代碼會發生錯誤（高版本瀏覽器升級修複了該問題）。

HTML5為表單欄位新增加了一個autofocus屬性。

<input type="text"  autofocus/>

檢測瀏覽器是否支持該屬性：

EventUtil.addHandler(window,"load",function(event){
    var element = document.forms[0].elements[0];
    if(element.autofocus !== true){
        element.focus();
        console.log("JS focus");
    }
})

所有表單都支持focus()，change()，blur()這三個事件。如下例子：

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.background != 'red'){
        target.style.background = 'yellow';
    }
});
EventUtil.addHandler(textbox,"blur",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(/[^\d]/.test(target.value)){
        target.style.background = 'red';
    }else{
        target.style.background = '';
    }
});
EventUtil.addHandler(textbox,"change",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    console.log(target.value)
    if(/[^\d]/.test(target.value)){
        target.style.background = 'red';
    }else{
        target.style.background = '';
    }
})

文本框腳本

兩種方式表示文本框：<input>和<textarea>。

<input>文本框，通過設置size屬性，可以指定文本框中顯示的字元數。通過設置value特性，可以設置文本框預設的初始值。而maxLength用於指定文本框可以接受的最大字元數。

<input type="text" size="20" value="init value" maxlength="50"/>

對於<textarea>多行文本框而言，要指定文本框的大小，通過設置rows（指定文本框的字元行數）和cols（指定文本框的字元列數）。<textarea>的初始值必須放在<textarea>與</textarea>之間。

<textarea rows="25" cols="5"> init vaule</textarea>

選擇文本

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

var textbox = document.forms[0].elements["textbox"];
textbox.select();

文本框獲得焦點，選擇其中所有文本，代碼如下：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"focus",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
})

1.選擇（select）事件

與select()方法對應的是一個select事件。在選擇了文本框的文本時，就會觸發select事件。不過到底什麼時候觸發select事件，還會因瀏覽器而異。在IE9以及其它高版本瀏覽器中，當用戶選擇了文本（而且要釋放滑鼠），才會觸發select事件。而在IE8以及更早的版本中，只要用戶選擇了一個字母（不必釋放滑鼠），就會觸發select事件。另外，在調用select()方法時也會觸發select事件。如下代碼：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
    console.log("Text selected：" + textbox.value);    
})

2.取得選擇的文本

雖然select事件知道用戶什麼時候選擇了文本，但是不知道用戶選擇了什麼文本。HTML5規範為此添加了兩個屬性：selectionStart和selectionEnd。這兩個屬性保存的是基於0的數值，表示所選擇文本的範圍（即文本選區開頭和結尾的偏移量）。

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
    console.log("Text selected：" + getSelectedText(textbox));    
})

IE8及之前的版本不支持這兩個屬性，有一個document.selection對象，其中保存著用戶在整個文檔範圍內選擇的文本信息；也就是說，無法確認用戶選擇的是頁面中哪個部位的文本。不過在和select事件一起使用的時候，可以假定是用戶選擇了文本框中的文本，因而觸發了該事件。要取得選中的文本，首先必須創建一個範圍，然後將文本從其中提取出來。代碼如下：

function getSelectedText(textbox){
    if(typeof textbox.selectionStart == 'number'){
        return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }else if(document.selection){
        document.selection.createRange().text;
    }    
}

3.選擇部分文本

HTML5也為選擇文本框中的部分文本提供瞭解決方案，即setSelectionRange()，這個方法接受兩個參數：要選擇第一個字元的索引和要選擇最後一個字元之後的字元索引（類似與substring的兩個參數），如下例子：

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

textbox.focus();

要看到選中的文本，必須在調用setSelectionRange()之前或之後立即將焦點設置到文本框。IE9以及其它高版本支持這種方案。

IE8以及更早版本支持使用範圍選擇部分文本。要選擇文本框中的部分文本，必須首先使用IE在所有文本框上提供的createTextRange()方法創建一個範圍，並將其放到恰當的位置上。然後再使用moveStart()和moveEnd()這兩個範圍方法將範圍移動到位。不過，在調用這兩個方法之前，還必須使用collapse()將範圍摺疊到文本框的開始位置。此時，moveStart()將範圍的起點和終點移動到了相同的位置，只要再給moveEnd()傳入要選擇的字元總數即可。最後一步，就是使用範圍的select()方法選擇文本。代碼如下：

textbox.value = "Hello world!";

var range = textbox.createTextRange();

//選擇所有文本
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",textbox.value.length);//Hello world!
range.select();

//選擇前3個字元
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);//hel
range.select();

//選擇第4到第6個字元
range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);//hel
range.select();

跨瀏覽器：

function selectText(textbox,startIndex,stopIndex){
    if(textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex,stopIndex);
    }else if(textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character",startIndex);
        range.moveEnd("character",stopIndex-startIndex);
        range.select();
    }
    textbox.focus();
}

 過濾輸入

1.屏蔽字元

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
})

註：上面代碼能屏蔽英文字元，但是不能屏蔽中文漢字。

只允許用戶輸入數值：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode))){
        EventUtil.preventDefault(event);
    }
})

雖然理論上只有在用戶按下字元鍵時才會觸發keypress事件，但有些瀏覽器也會對其它鍵觸發此事件。Firefox和Safari(3.1版本以前)會對向上鍵、向下鍵、退格鍵和刪除鍵觸發keypress事件。這就意味著，僅考慮到屏蔽不是數值的字元還是不夠，還要避免屏蔽這些極為常見和必要的鍵。在Firefox中，所有由非字元鍵觸發的keypress事件對應的字元編碼為0，而在Safari3.1以前的版本中，對應的字元編碼全部為8。為了讓代碼更通用，只要不屏蔽那些字元編碼小於10的鍵即可，故上面代碼變為如下：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
        EventUtil.preventDefault(event);
    }
})

上面代碼可以屏蔽非數值字元，但不屏蔽那些也會觸發keypress事件的基本按鍵。

還有一個問題需要處理：複製、粘貼以及其它操作還要用到ctrl鍵，最後還有一個檢測，以確保用戶沒有按下ctrl鍵，代碼如下：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
        EventUtil.preventDefault(event);
    }
})

2.操作剪貼板

HTML5的6個剪貼板事件。

  • beforecopy：在發生複製操作前觸發。
  • copy：在發生複製操作時觸發。
  • beforecut：在發生剪切操作前觸發。
  • cut：在發生剪切操作時觸發。
  • beforepaste：在發生粘貼操作前觸發。
  • paste：在發生粘貼操作時觸發。

在實際的事件發生前，通過beforecopy、beforecut和beforepaste事件可以在向粘貼板發送數據，或者從剪貼板取得數據之前修改數據。不過，取消這些事件並不會取消對剪貼板的操作，只有取消copy、cut和paste事件，才能阻止相應的操作發生。

要訪問剪貼板中的數據，可以使用clipboardData對象；在IE中，這個對象是window對象的屬性；而在Firefox、Safari和Chrome中，這個對象是相應的event對象的屬性。但是，在Firefox、Safari和Chrome中，只有在處理剪貼板事件期間clipboardData對象才有效，這是為了防止對剪貼板的未授權訪問；在IE中，則可以隨時訪問clipboardData對象。

這個clipboardData對象有三個方法：getData()、setData()和clearData()。

getData()：從剪貼板中取得數據，接受一個參數，即要取得的數據的格式。在IE中，有兩種數據格式，“text”和“URL”。在Firefox、Safari和Chrome中，這個參數是一個MIME類型；不過，可以用“text”代表“text/plain”。

setData()：第一個參數也是數據類型，第二參數是放到剪貼板中的文本。對於第一個參數IE照樣支持“text”和“URL”。而在Safari和Chrome中，這個參數仍然只支持MIME類型。但是與getData()方法不同的是，Safari和Chrome的setData()方法不能識別“text”類型。這兩個瀏覽器在成功將文本放到剪貼板後，都會返回true，否則返回false。為了彌合這些差異，可以向EventUtil對象中添加下列方法：

var EventUtil = {

    //省略的代碼
    
    //得到剪貼板數據
    getClipboardData:function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    //設置剪貼板數據
    setClipboardData:function(event,value){
        if(event.clipboardData){
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    }
};

在paste事件中，確定剪貼板中的數據是否有效，如果無效，取消預設行為，如下代碼，如果不是數字，則取消粘貼：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"paste",function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardData(event);
    if(!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
})

自動切換焦點

 html:

<form>
    <input type="text" name="tel1" id="txtTel1" maxlength="3"/>
    <input type="text" name="tel2" id="txtTel2" maxlength="3"/>
    <input type="text" name="tel3" id="txtTel3" maxlength="4"/>
</form>

JS代碼：

(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

1.必填欄位

在表單欄位中添加required屬性。

<form>
    <input type="text" name="text" id="myText" required/>
    <input type="submit" value="提交"/>
</form>

JS檢測某個表單欄位是否為必填欄位：

var isUernameRequired = document.forms[0].elements['username'].required;

使用下麵這段代碼可以測試瀏覽器是否支持required屬性：

var isRequiredSupported = "required" in document.createElement("input");

2.其他輸入類型

HTML5為<input>元素的type值新添了幾個值。其中“email”和“url”是兩個得到支持最多的類型，如下代碼：

<form>
    <input type="email" name="email" required/>
    <input type="url" name="url" required/>
    <input type="submit" value="提交"/>
</form>

檢測瀏覽器是否支持這些新類型，不支持它們的舊版本瀏覽器會自動將未知的值設置為“text”，而支持的瀏覽器會返回正確的值。例如：

var input = document.createElement("input");
input.type ="email";

var isEmailSupported = (input.type == "email");

3.數值範圍

number、range、datetime、datetime-local、date、month、week、time。

對於這些數值類型的輸入元素，可以指定min屬性（最小的可能值）、max屬性（最大的可能值）和step屬性（從min到max的兩個刻度之間的差值）。

例如，想用戶輸入0到100的值，並且只能是5的倍數，代碼如下：

<input type="number" min="0" max="100" step="5" name="acount"/>

還有兩個方法stepUp()和stepDown()，還沒有任何瀏覽器支持，使用如下：

input.stepUp();//加1
input.stepUp(6);//加6
input.stepDown();//減1
input.stepDown(6);//減6

4.輸入模式

HTML5為文本欄位新增了pattern屬性。這個屬性的值是一個正則表達式，用於匹配文本框中的值。如下，只運行文本輸入數字，代碼如下：

<input type="number" pattern="\d+" name="acount"/>

註意，模式的開頭和結尾不用加^和$符號。

檢測瀏覽器是否支持pattern屬性：

var isPatternSupported = "pattern" in document.createElement("input");

5.檢測有效性

使用checkValidity()方法可以檢測整個表單，也可以檢測某個表單欄位。

//檢測具體的某個表單欄位
if(document.forms[0].elements[0].checkValidity()){
    alert("有效的值");
}else{
    alert("無效的值");
}

//檢測整個表單
if(document.forms[0].checkValidity()){
    alert("表單有效");
}else{
    alert("表單無效");
}

 6.禁用驗證

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

<form method="post" action="signup.php" novalidate>
    <!--這裡插入表單元素-->
</form>

在JS中使用noValidate屬性可以取得或設置這個值，如果這個屬性存在，值為true，不存在則為false。

document.forms[0].noValidate = true; //禁用驗證

如果一個表單中有多個提交按鈕，可以指定某個提交按鈕不必驗證表單，可以在相應的按鈕上添加formnovalidate屬性。

<form method="post" action="foo.php">
    <!--這裡插入表單元素-->
    <input type="submit" value="Regular Submit"/>
    <input type="submit" formnovalidate name="btnNovalidate" value="Non-validating Submit"/>
</form>

使用JS設置這個屬性：

document.forms[0].elements['btnNovalidate'].formNoValidate = true; //禁用驗證

選擇框腳本

選擇框是通過<select>和<option>元素創建的。除了所有表單欄位共有的屬性和方法外，HTMLSelectElement類型還提供了下列屬性和方法。

  • add(newOption,relOption)：向控制項中插入新<option>元素，其位置在相關項（relOption）之前。
  • multiple：布爾值，表示是否允許多項選擇；等價於HTML中的multiple特性。
  • options：控制項中所有<option>元素的HTMLCollection。
  • remove(index)：移除給定位置的選項。
  • selectedIndex：基於0的選中項的索引，如果沒有選中項，則值為-1。對於支持多選的控制項，只保存選中項中第一項的索引。
  • size：選擇框中可見的行數；等價於HTML中的size特性。

選擇框的type屬性不是“select-one”，就是“select-multiple”。這取決於HTML代碼中有沒有multiple特性。

在DOM中，每個<option>元素都有一個HTMLOptionElement對象。為便於訪問數據，HTMLOptionElement對象添加了下列屬性：

  • index：當前選項在options集合中的索引。
  • label：當前選項的標簽；等價於HTML中的label特性。
  • selected：布爾值，表示當前選項是否被選中。將這個屬性設置為true可以選中當前選項。
  • text：選項的文本。
  • value：選項的值（等價於HTML中的value特性）。

如下代碼，HTML：

<form>
    <select name="location">
        <option value="1">北京</option>
        <option value="2">天津</option>
        <option value="3">上海</option>
    </select>
</form>

JS代碼：

var selectbox = document.forms[0].elements['location'];
var text = selectbox.options[0].text; //選項的文本
var value = selectbox.options[0].value;//選項的值

選擇選項

使用選擇框的selectedIndex屬性。如上面代碼預設選中了天津。

var selectbox = document.forms[0].elements['location'];
var selectOption = selectbox.options[selectbox.selectedIndex];

選中選擇框的第一項：

selectbox.options[0].selected = true;

多選下，取得所有選中的項：

function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for(var i =0, len = selectbox.options.length; i < len; i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
var selectbox = document.forms[0].elements['location'];
getSelectedOptions(selectbox);

添加選項

第一種，DOM方式添加：

var selectbox = document.forms[0].elements['location'];
var newoption = document.createElement('option');
newoption.appendChild(document.createTextNode('Option text'));
newoption.setAttribute('value',"option value");
selectbox.appendChild(newoption);

第二種方式，使用Option構造函數，Option構造函數接受兩個參數：文本（text）和值（value）,第二個參數可選。雖然這個構造函數會創建一個Option實例，但相容DOM的瀏覽器會返回一個<option>元素。如下代碼：

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.appendChild(newoption); //在IE8以及之前版本有問題

第三種方式使用選擇框的add()方法。該方法接受兩個參數：要添加的新選項和將位於新選項之後的選項。

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.add(newoption,undefined);

移除選項

三種方式如下：

var selectbox = document.forms[0].elements['location'];

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

//remove(index)傳入移除項的索引
selectbox.remove(0); //移除第一個選項
 
//將相應選項設置為null
selectbox.options[0] = null;//移除第一個選項

清除選擇框所有的項：

function clearSelectBox(selectbox){
    for(var i=0 ,len=selectbox.options.length; i < len; i++){
        selectbox.remove(i);
    }
}

移動和重排選項

將第一個選擇框中的第一個選項移動到第二選擇框中，代碼如下：

var selectbox1 = document.getElementById('location1');
var selectbox2 = document.getElementById('location2');
selectbox2.appendChild(selectbox1.options[0]);

移動選項和移除選項有一個共同之處，即會重置每一個選項的index屬性。

要將選擇框中的某一項移動到特定的位置，最適合的DOM方法insertBefore()。

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index - 1]);

將選擇框中的選項向後移動一個位置：

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

表單序列化

在編寫代碼之前，有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數據發送給伺服器的。

  • 對錶單欄位的名稱和值進行URL編碼，使用和號（&）分隔。
  • 不發送禁用的表單欄位。
  • 只發送勾選的覆選框和單選按鈕。
  • 不發送type為“reset”和“button”的按鈕。
  • 多選選擇框的每個選中的值單獨一個條目。
  • 在單擊提交按鈕提交表單的情況下，也會發送提交按鈕；否則，不發送提交按鈕。也包括type為“image”的<input>元素。
  • <select>元素的值，就是選中的<option>元素的value特性的值。如果<option>元素沒有value特性，則是<option>元素的文本值。

表單序列化代碼：

function serialize(form){
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    for(i = 0,len = form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if(field.name.length){
                    for(j =0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[i];
                        if(option.selected){
                            optValue = "";
                            if(option.hasAttribute){
                                optValue = (option.hasAttribute("value") ? option.value:option.text);
                            }else{
                                optValue = (option.attributes['value'].specified ? option.value:option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:  //欄位集
            case "file":     //文件輸入
            case "submit":   //提交按鈕
            case "reset":    //重置按鈕
            case "button":   //自定義按鈕
                break;
            case "radio":    //單選按鈕
            case "checkbox": //覆選按鈕
                if(!field.checked){
                    break;
                }
            default:  //執行預設操作
                //不包含沒有名字的表單欄位
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
            
        }
    }
    return parts.join('&');
}

富文本編輯

富文本編輯，這一技術的本質，就是在頁面中嵌入一個包含空HTML頁面的iframe。通過設置designMode屬性，這個空白的HTML頁面可以被編輯，而編輯對象則是該頁面<body>元素的HTML代碼。designMode屬性有兩個可能的值：“off”（預設值）和“on”。在設置為“on”時，整個文檔都會變得可以編輯（顯示插入符號），然後就可以像使用字處理軟體一樣，通過鍵盤將文本內容加粗、變成斜線等等。

<iframe name="richedit" style="width:100px;height:100px;" src="index2.html"></iframe>
<script type="text/javascript">
    EventUtil.addHandler(window,"load",function(event){
        frames["richedit"].document.designMode = "on";
    })
</script>

使用contenteditable屬性

另一種編輯富文本內容的方式是使用名為contenteditable的特殊屬性。這個屬性最早由IE實現。使用它，不需要使用iframe、空白頁和JS，只要給元素設置該屬性即可，如下：

<
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【代碼筆記】Web-JavaScript-JavaScript void
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript void</title> <script type="text/javascript"> <!-- //--> </script> ...
  • 【js高程學習筆記】關於變數值和函數參數
    變數包含了兩種不同類型的值： 基本類型 （Undefined、null、Boolean、Number、string都屬於基本類型） 引用類型 （對象） 兩種值在賦值上不同的是： 將一個引用類型的值（對象）賦值給一個變數，可以為其添加/刪除屬性和方法。 但如果是一個基本類型的值是不可以這樣的。 將一個 ...
  • js二分查找樹實現
    function BinaryTree() { var Node = function(key) { this.key = key; this.left = null; this.right = null; } var root = null; var ... ...
  • AngularJS之jeDate日期控制項基本使用
    業務背景： 初學AngularJs，最近一段時間，因業務需求，要求日期選擇帶有快捷鍵、時分秒等。鑒於AngularJS組件庫ui-bootstrap沒有此功能，找了一款基於原生JS實現的插件-jeDate,總體效果還可以 基本封裝使用： ...
  • Koa與Node.js開發實戰（2）——使用Koa中間件獲取響應時間（視頻演示）
    在實戰項目中，經常需要記錄下伺服器的響應時間，也就是從伺服器接收到HTTP請求，到最終返回給客戶端之間所耗時長。在Koa應用中，利用中間件機制可以很方便的實現這一功能。 ...
  • 通過css改變svg img的顏色
    需求如下圖，hover的時候改變圖標顏色，圖標為引入的svg img 一般的解決辦法有：1.字體圖標改變css的color屬性；2.js在hover事件中切換圖片；3.老一點的方案是hover切換背景？ 但是為了更小的開銷，一般css為更好的解決方案，svg的顏色是在標簽內通過fill屬性寫死的，所 ...
  • vue 組件發佈記錄
    好久沒做獨立的 vue 組件了，最近突然想把一個常用的 vue 組件打成一個 npm 包，方便使用。好久不用，發現已經忘記環境怎麼搭建。翻看以前的組件，才慢慢回想起來，中間還出現些錯誤。在這記錄下開發過程，以備忘。 一、新建工程 打成 npm 包的 vue 組件一般不會太複雜，當然如果是做一個 UI ...
  • meta標簽的http-equiv與content解析
    meta是html語言head區的一個輔助性標簽，以下是meta的http-equiv屬性和content屬性的一些介紹。 http-equiv屬性 指示伺服器在發送實際的文檔之前，要在傳送給瀏覽器的 MIME 文檔頭部包含http-equiv屬性的值。此屬性要與content屬性結合在一起使用。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類