緊接著上面的文章，一開始準備一篇文章搞定，后來看到，要總結的東西還不少，干脆，把上面文章拆成兩部分吧，這部分主要講講表單知識！

表單知識

1、Html5的autofocus屬性。

有個這個屬性，我們不用js就能自動把焦點移動到相應的字段。

例如：

<input type="text" value="" autofocus />

2、獲取選擇的文本

很久之前，我寫過一個關于編輯器的文章。javascript execCommand,復文本框神器。

今天我主要說一下如何獲取文本框中選擇的數值。html5中增加了兩個屬性：selectionStart，selectionEnd，可以獲取開始的選擇和結束的選擇。

因此我們可以封裝一個函數：

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

通過上面函數，來獲取選擇的文本，這個應用也是蠻多的。

3、選擇部分文本

為了兼容性，我們也封裝了一個函數。用到了setSelectionRange（）；函數如下：

//選擇部分文本 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(); }

用法如下：

textbox.value="hello haorooms"; //選擇所有文本 selectText(textbox,0,textbox.value.length); //hello haorooms //選擇前3個字符 selectText(textbox,0,3);//hel //選擇4-7個字符 selectText(textbox,4,7);//o h

4、html5剪切板事件

html5把剪切板事件納入規范，6個剪切板事件！

beforecopy :發生在復制操作之前 copy:發生在復制操作時觸發 beforecut:在剪切操作之前觸發 cut:在發生剪切的時候觸發 beforepaste:在發生粘貼操作之前觸發 paste:在發生粘貼操作時觸發

因此，我們再給EventUtil封裝2個函數：

var EventUtil = { //緊接著之前的代碼，之前的代碼省略....... getClipboardText:function(event){//獲取剪切板內容 var clipboardData =(event.clipboardData|| window.clipboardData); return clipboardData.getData("text"); }, setClipboardText:function(event,value){//設置剪切板內容 if(event.clipboardData){ return event.clipboardData.setData("text/plan",value); }else if(window.clipboardData){ return window.clipboardData.setData("text",value); } } };

5、自動切換焦點

我們在表單輸入的時候，經常會現在輸入長度，用maxLength，我們現在的想法就是，當輸入長度到達最大時，讓其自動切換焦點，增加用戶體驗，可以避免我們再用tab鍵或者鼠標了，那么在這里，我們封裝一個函數吧~

(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; } } } } vartextbox1=document.getElementById("textTel1"), textbox2=document.getElementById("textTel2"), textbox3=document.getElementById("textTel3"); EventUtil.addHandler(textbox1,"keyup",tabForward); EventUtil.addHandler(textbox2,"keyup",tabForward); EventUtil.addHandler(textbox3,"keyup",tabForward); })();

完整案例下載，請等待“前端資料庫上線”，該案例在前端資料庫中！

6、html5約束驗證API

假如我們要必填字段，可以如下寫：

<input type="text" name="username" required > <!--必填字段 -->

html5增加了pattern屬性，可以做正則驗證，例如只輸入數字

<input type="text" pattern="\d+" name="count" >

type是number的屬性，我之前寫過一篇文章，大家可以看一下：http://www.haorooms.com/post/touchweb_commonquestion

第一個就介紹了h5網站input 設置為type=number的問題。

7、檢測有效性

主要是用checkValidity()方法和validity屬性。 checkValidity()方法可以檢測表單中的某個字段是否有效。所有表單字段都有這個方法，如果字段的值是有效的，這份方法會返回true，否則則是false。與checkValidity()方法相比，validity屬性可以告訴你很多東西。

validity對象屬性包含如下一系列屬性：

valueMissing : 輸入值為空時

　　typeMismatch : 控件值與預期類型不匹配

　　patternMismatch : 輸入值不滿足pattern正則

　　tooLong : 超過maxLength最大限制

　　rangeUnderflow : 驗證的range最小值

　　rangeOverflow：驗證的range最大值

　　stepMismatch: 驗證range 的當前值 是否符合min、max及step的規則

　　customError： 不符合自定義驗證，是否設置setCustomValidity(); 自定義驗證

　　placeholder : 輸入框提示信息

　　autocomplete : 是否保存用戶輸入值。默認為on，關閉提示選擇off

　　autofocus : 指定表單獲取輸入焦點

　　list和datalist : 為輸入框構造一個選擇列表。list值為datalist標簽的id

　　Formaction : 在submit里定義提交地址

用法如下：

if(input.validity && !input.validity.valid){ if(input.validity.valueMissing){ alert("不能為空") }else if(input.validity.typeMismatch){ alert("控件值與預期類型不匹配"); } }

8、禁用驗證

有驗證就有禁止，我們可以在form標簽中添加novalidate屬性，可以讓表單不自行驗證。如果提交按鈕有多個，為了指定點擊某一個提交按鈕不必驗證表單，可以在相應的按鈕上添加formnovalidate屬性。也可用JavaScript添加禁用驗證的屬性。

如下：

<form action="/haorooms"> <input type="text" id="text" required=""> <input type="submit" value="跳過驗證，直接提交" formnovalidate> </form> <form action="/haorooms" novalidate> <input type="text" id="text" required=""> <input type="submit" value="直接提交"> </form>

9、去掉chrome記住密碼后自動填充表單的黃色背景

我前面的文章分享幾個前端干貨，面試經常提，中，第三條，寫過一個方法，去掉默認黃色背景。

在前面介紹方法基礎上，我這里再補充一些！

設置表單屬性 autocomplete="off/on" 關閉自動填充表單，自己實現記住密碼。如下：

<!-- 對整個表單設置 --> <form autocomplete="off" method=".." action=".."> <!-- 或對單一元素設置 --> <input type="text" name="textboxname" autocomplete="off">

同樣，對應純色表單，可以添加如下樣式去除

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #2390cc inset; }

10、multiple屬性

<form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form>

可以接受多個值的文件上傳！

<select multiple="multiple" size="2"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

select中的multiple可以同時選擇多個選項，把 multiple 屬性與 size 屬性配合使用，來定義可見選項的數目。

轉載于:https://www.cnblogs.com/sybboy/p/6672290.html

總結

以上是生活随笔為你收集整理的[H5表单]一些html5表单知识及EventUtil对象完善的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。