首頁 > 開發者 > JavaScript
前言:下面我們接著旅程8繼續我們的JavaScript Dom征程9。在這篇部落格裡面我們主要講述了form對象，以及寫JavaScript代碼的時候不同瀏覽器之間的差異和在JavaScript中使用Regex的一些知識點，接下來我們做了兩個練習來說明了這些知識點，那就是：斷行符號實現Tab跳轉和全額文字框。
(1) 先來寫段代碼舉例說明一下吧
1 <form id="form1" action="ball.htm" onsubmit="if(document.getElementById('name').value.length<=0){alert('不可為空');return false;}"> 2 3 <input type="text" id="name" onblur="document.getElementById('form1').submit()" /> 4 5 <input type="button" id="btn1" onclick="alert('我惦記了')" value="一個按鈕" /> 6 7 <input type="button" value="我最先提交" onclick="document.getElementById('btn1').click()" /> 8 9 <input type="button" value="提交吧" onclick="document.getElementById('form1').submit()" />10 11 <input type="submit" value="驗證Form" />12 13 </form>
(2) form對象是表單的Dom對象
(3) 方法：submit提交表單，但是不會觸發onsubmit事件。
(4) 實現autopost,也就是焦點離開控制項以後頁面頁面立即提交，而不是只有提交submit按鈕以後才提交，當游標離開的時候出發onblur事件，在onblur中調用form的submit方法。
(5) 再點擊submit後form的onsubmit事件被觸發，在onsubmit中可以進行資料校正，資料有問題，返回false既可以取消提交。
例題說明：
1 <form id="form1" action="dongoto.htm"> 2 3 <select onchange="document.getElementById('form1').submit()"> 4 5 <option>吉林</option> 6 7 <option>甘肅</option> 8 9 <option>北京</option>10 11 </select>12 13 <input type="submit" />14 15 </form>
(1) 面試題：說說開發項目的時候不同瀏覽器的不同點，你是怎麼解決的？
Appendchild,insertcell,px。
(2) 不同瀏覽器中對Dom支援的方法不一樣。
1) 擷取網頁中哪個元素觸發了事件，在IE中使用srcElement;在FireFox下面使用target。
2) 使用Dom擷取和更改網頁標籤元素內文本，在IE中使用innerText，在FireFox中使用textContent。
3) 動態為網頁和元素繫結事件，在IE中綁定事件的方法是：attachEvent，在FireFox中綁定事件的方法是AddEventListener。
(3) 不同瀏覽器中對CSS的支援不一樣，所以出現在IE中顯示正常的網頁，在FF下面全部亂點了，哀悼網頁使用的CSS只有IE支援，FF都不支援。
(4) JQuery之類的架構進行s了封裝，將不同的瀏覽器的差異幫開發人員處理了，開發人員只要調用Jquery方法，Jquery會協助在不同的瀏覽器中進行翻譯，用JQuery就可以解決不同瀏覽器上的Dom的不同。
(1) JavaScript中建立Regex類的方法：
1) var regex=new RegExp(”\\d{5}”)或者var regex=^d{5}/
2) /運算式/是JavaScript中專門為簡化Regex編寫而提供的文法，寫在//中的Regex就不用管轉義符了。
(2) RegExp對象的方法
1) test(str)判斷字串str是否匹配Regex，相當於IsMatch。
var regex=/.+@.+/;
alert(regex.test(’934532778#qq.com’));
alert(regex.test(’sss.ss.com’));
2) exec(str)進行搜尋匹配，傳回值為匹配結果。
3) compile編譯運算式，提高運行速度。
(3) string對象中提供了一些與Regex相關的方法，相當於對於RegExp類的封裝，簡化調用。
1) match(regexp),相當於調用exec。
var s=934532778@qq.com;
var regex=/(.+)@(.+)/;
s．match(regex);
alert(regexp.$1); alert(RegExp.$2); //取得第一組和第二組的值。
斷行符號實現Tab跳轉，響應文字框的onkeyDown事件，window.event.keyCode獲得使用者點擊的keycode。(*)
keyCode和ASCII不是完全一致，主鍵盤的1和小鍵盤的1的ASCII一樣，但是keyCode不一樣，斷行符號的KeyCode為13，tab的keyCode為9
1 <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9}"> 2 3 <input type="text" /> 4 5 <input type="text" /> 6 7 <input type="text" /> 8 9 <input type="text" />10 11 </body>
全額文字框:財務相關係統中涉及到金額的文字框有如下要求：
(1) 進入金額文字框下不使用中文IME。
(2) 不能輸入非數字。
(3) 焦點在文字框中的時候文字框靠左對齊，焦點離開文字框中的時候文字框靠右對齊，顯示千分位。
注釋：(1) 禁用IME：style=”inne-mode:disabled”。
(2) 禁止鍵入非法值，只有這些才能夠被鍵入
(3) 禁止黏貼（偉大的tester），<input onpaste=”return false;”>大暴力，應該只是禁止黏貼非法值，在onpaste中通過clipboardData.getData(‘text’)取到黏貼板中的值，然後遍曆每個字元，看是否是合法的值，如果全部是合法值，才允許黏貼，只要有一個非法值就禁止黏貼。
(4) 添加千分位
1 <script type="text/javascript"> 2 3 function numkeyDown() { 4 5 var k = window.event.keyCode; 6 7 return isValidNum(k); //判斷K是否是合法的ASCII 8 9 }10 11 function isValidNum(k) {12 13 return (k == 9) || (k == 13) || (k == 46) || (k == 80) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k == 105) || (k >= 37 && k <= 40);14 15 }16 17 function numpaste() {18 19 var text = clipboardData.getData("text");20 21 for (var i = 0; i < text.length; i++) {22 23 var asc = text.charCodeAt(i); //charAt——>"3",charCodeAt取ASCII碼24 25 if (!isValidNum(asc)) { //遇到一個非法值就認為要黏貼的內容是非法的。26 27 return false;28 29 }30 31 }32 33 }34 35 </script>36 37 </head>38 39 <body>40 41 <input type="text" onpaste="return numpaste()" onkeydown="return numkeyDown"42 43 onfocus="this.style.textalige='left'"44 45 onblur="this.style.textalige='right'"46 47 style="ime-mode：disabled" />48 49 </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
