JS基礎---表單處理

標籤：

一、眼中的表單

         在HTML中，表單是由<form>元素來表示的，在JavaScript中，表單對應的是HTMLFormElement類型。我們所用的表單就是在form中的各種控制群組成。下面介紹一下它的欄位和操作。

                        

二、表單介紹幾個重點                               1、blur和change事件在不同瀏覽器中響應的先後順序

         關於 blur 和 change事件的關係，並沒有嚴格的規定。blur 事件和change事件，一個是失去焦點，一個是改變選項。在某些瀏覽器中，blur事件，會先於 change事件發生；而在其他瀏覽器中，則恰好相反。例如：

<span style="font-size:14px;">addEvent(window,'load',function(){    varfm=document.getElementById('myForm');    varuser=fm.elements['user'];     addEvent(user,'blur',function(){       alert('blur');    });    addEvent(user,'change',function(){       alert('change');     });});</span>

      不同的瀏覽器會有不同的反應順序。但大多數瀏覽器還是先change後blur，小編試IE、FireFox、Google、and360.

2、提交表單

     提交資料最大的問題就是重複提交表單。 因為各種原因，當一條資料提交到伺服器的時候會出現延遲等長時間沒反映，使用者以為瀏覽器沒有反應，或者網速有問題，於是導致使用者不停的點擊提交，從而使得重複提交了很多相同的請求，或造成錯誤、或寫入資料庫多條相同資訊。

我們先做一個3秒鐘的類比延遲

<span style="font-size:14px;">addEvent(fm,'submit', function (evt) { //類比延遲preDef(evt);setTimeout(function() {fm.submit();}, 3000);});</span>

有兩種方法可以解決這種問題：

      第一種就是提交之後， 立刻禁用點擊按鈕；

document.getElementById('sub').disabled= true; //將按鈕禁用

      第二種就是提交之後取消後續的表單提交操作。

<span style="font-size:14px;">varflag = false //設定一個監聽變數if(flag == true) return //如果存在返回退出事件flag = true; //否則確定是第一次，設定為 true</span>

三、跨瀏覽器處理

        實現選擇form中輸入框中的部分文本，會存在瀏覽器的相容問題，解決方案：

<span style="font-size:14px;">//選擇部分文本實現跨瀏覽器安全色functionselectText(text, start, stop) {   if(text.setSelectionRange) {       text.setSelectionRange(start,stop);       text.focus();   } else if(text.createTextRange) {       var range =text.createTextRange();       range.collapse(true);       range.moveStart('character',start);       range.moveEnd('character',stop - start); //IE 用終點減去起點得到字元數       range.select();   }}</span>

       使用 select事件，可以選中文字框文本後觸發。

<span style="font-size:14px;">addEvent(textField,'select', function () {       alert(this.value); //IE 事件需要傳遞 this 才可以這麼寫});</span>

       在JS中最讓人頭疼的就是瀏覽器的相容問題，李炎恢老師在整個視頻的講解過程中也一直在解決瀏覽器的相容問題。但這同時老師也在向我們傳達一個道理，當你在一個瀏覽器下測試成功了，並不代表所有的使用者都會使用這一個瀏覽器，如果使用者在另外一個瀏覽器看到的完全是另一個樣子，或者功能不能實現的時候，這就是我們做軟體的失敗了。所以，瀏覽器的相容問題也在體現全心全意為人民服務的宗旨。

JS基礎---表單處理