// 用戶點擊重置按鈕時,表單會被初始化;// 雖然這個按鈕還得以保留,但目前Web已經很少去使用了;因為用戶填好信息后,不小心點擊了重置就會全部清空,用戶體驗極差;// 有兩種方法調用reset事件:第一個就是直接type="reset"即可;第二個就是使用fm.reset()方法調用;  <input type="reset" value="重置" />          // 不需要JS代碼即可實現;  addEvent(document,'click',function(){    fm.reset();                   // 使用JS方法實現重置;  });

// 利用focus事件修改文本框的背景色;// 利用change事件在用戶輸入非數值字符時再次修改背景色;  var bextbox = document.forms[0].elements[0];  EventUtil.addHandler(textbox,'focus',function(evt){    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(target.style.backgroundColor != 'red'){      target.style.backgroundColor = 'yellow';    // 選中狀態時文本框的背景是黃色;    }  });  EventUtil.addHandler(textbox,'blur',function(evt){   // 失去焦點事件;    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(/[^/d]/.test(target.value)){           // 輸入非數值字符時;      target.style.backgroundColor = 'red';      // 文本框背景變成紅色;    }else{      target.style.backgroundColor = '';    }  });  EventUtil.addHandler(textbox,'change',function(evt){  // 改變value值且失去焦點事件;    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(/[^/d]/.test(target.value)){      target.style.backgroundColor = 'red';      // 文本框變成紅色;    }else{      target.style.backgroundColor = '';    }  });

// 使用select()方法,可以將文本框里的內容選中,并將焦點設置到文本框中;  textField.select();                   // 在文本框獲得焦點時選擇其所有文本;// 選取部分文本// 在使用文本框內容的時候,我們有時要直接選定部分文本,這個行為還沒有標準;// Firefox的解決方案是:setSelectionRange()方法;它接受兩個參數:索引和長度;  textField.setSelectionRange(0,1);            // 選擇第一個字符;  textField.setSelectionRange(0,textField.value.length);  // 選擇全部;   // IE8以下不支持這種寫法,可以使用IE的范圍操作代替;  var range = textField.createTextRange();         // 創建一個文本范圍對象;  range.collapse(true);                  // 將指針移動到起點;  range.moveStart('character',0);             // 移動指針,character表示逐字移動;  range.moveEnd('character',1);              // 移動終點;  range.select();                     // 焦點選定;// 選擇部分文本兼容函數  function selectText(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',sotp-start);      range.select();    }  }// 與select()方法對應的,是一個select事件,可以選中文本框文本后觸發;  addEvent(textField,'select',function(){    alert(this.value);                // IE事件需要傳遞this才可以這么寫;  });

// 獲得選擇的文本// Firefox提供了兩個屬性:selectionStart和selectionEnd;  addEvent(textField,'select',function(){    alert(this.value.substring(this.selectionStart,this.selectionEnd));  });  // IE8以下,提供了另一個方案:selection對象,屬于document;  // 這個對象保存著用戶在整個文檔范圍內選擇的文本信息;  // 兼容函數  function getSelecText(text){    if(typeof text.selectioinStart =='number'){     // 非IE;      return text.value.substring(text.selectionStart,text.selectionEnd);    }else if(document.selection){            // IE;      return document.selection.createRange().text;  // 獲取IE選擇的文本;    }  }  // PS:存在問題:IE在觸發select事件的時候,在選擇一個字符后立即觸發,而其他瀏覽器是選擇想要的字符后釋放鼠標鍵時再觸發;  // 所以使用alert()的話,導致跨瀏覽器的不兼容;  // 所以我們可以通過將得到的選擇文本賦值給別的對象;  addEvent(textField,'select',function(){    // alert(getSelecText(this));            // 導致用戶行為結果不一致;     document.getElementById('box').innerHTML = getSelecText(this);  })

// 為了使文本框輸入指定的字符,我們必須對輸入進文本框的字符進行驗證;  addEvent(areaField,'keypress',function(evt){    var e = evt || window.event;    var charCode = getCharCode(evt);      // 得到字符編碼;    if(!//d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){      preDef(evt);              // 條件阻止默認;    }  });  // PS:前半段條件判斷只有數字才可以輸入,導致常規按鍵,比如光標鍵/退格鍵/刪除鍵等無法使用;  // 部分瀏覽器比如Firefox,需要解放這些鍵,而非字符觸發的編碼均為0;  // 在Safari3之前的瀏覽器,也會被阻止,而它對應的字符編碼全部為8,所以最后加上charCode>9的判斷;  // 確保用戶沒有按下ctrl鍵;

// 阻止文本框裁剪/復制和粘貼;事件名        說明copy     在發生復制操作時觸發;cut      在發生裁剪操作時觸發;paste     在發生粘貼操作時觸發;beforecopy  在發生復制操作時觸發;beforecut   在發生裁剪操作時觸發;beforepaste  在發生粘貼操作時觸發;// 如果我們想要禁用裁剪/復制/粘貼,那么可以阻止默認行為即可;  addEvent(areaField,'cut',function(evt){    preDef(evt);  });  addEvent(areaField,'copy',function(evt){    preDef(evt);  });  addEvent(areaField,'paste',function(evt){    preDef(evt);  });// 最后一個影響輸入的因素,就是:輸入法;// 中文輸入法,它的原理是在輸入法面板上先儲存文本,按下回車就寫入英文文本,按下空格就寫入中文文本;// 解決方案:通過CSS來禁止調出輸入法;  style='ime-mode:disabled';          // CSS直接編寫;  areaField.style.imeMode='disabled';      // 在JS中設置;  // PS:Chrome無法禁止輸入法調出,所以,最后使用正則驗證已輸入的文本;  addEvent(areaField,'keyup',function(evt){    this.value = this.value.replace(/[^/d]/g,'');  // 把非數字都替換成空;  });

// 為了增加表單字段的易用性,很多字段在滿足一定條件時(比如長度),就會自動切換到下一個字段上繼續填寫;  <input type='text' name='user1' maxlength='1'/>    // 只能寫1個;  <input type='text' name='user2' maxlength='2'/>     <input type='text' name='user3' maxlength='3'/>  function tabForward(evt){    var e = evt || window.event;    var target = getTarget(evt);    // 判斷當前長度是否和指定長度一致;    if(target.value.length == target.maxLength){      // 遍歷所有字段;      for(var i=0; i<fm.elements.length; i++){        // 找到當前字段;        if(fm.elements[i]==target){          // 就把焦點移入下一個字段;          if(fm.elements[i+1]){            fm.elements[i+1].focus();          }          // 中途返回;          return;        }      }    }  }

var city = fm.elements['city'];      // HTMLSelectElement;  alert(city.options);            // HTMLOptionsCollection;  alert(city.options[0]);          // HTMLOptionElement;  alert(city.type);             // select-one;  // PS:選擇框里的type屬性有可能是:select-one,也有可能是:select-multiple;  // 這取決于HTML代碼中有沒有multiple屬性;  alert(city.options[0].text);       // 上海text,獲取text值;  alert(city.options[0].value);      // 上海value,獲取value值;  // PS:操作select時,最好使用HTMLDOM,以為瀏覽器兼容性比較好;  // 如果使用標準DOM,會因為不同的瀏覽器導致不同的結果;  // PS:當選項沒有value值的時候,IE會返回空字符串,其他瀏覽器會返回text值;

// 有三種方式可以移除某一個選項:DOM移除/remove()方法移除和null移除;city.removeChild(city.option[0]); // DOM移除;city.remove(0); // remove()移除,推薦;city.options[0] = null; // null移除;// PS:當第一項移除后,下面的項,往上移,所以不停的移除第一項,即可全部移除;

// 如果有兩個選擇框,把第一個選擇框里的第一個選項移到第二個選擇框里,并且第一個選擇框里的第一項被移除;var city = fm.elements['city']; // 第一個選擇框;var info = fm.elements['info']; // 第二個選擇框;info.appendChild(city.options[0]); // 移動,并在第一個選擇框中刪除;

// 通過checked屬性來獲取單選按鈕的值;  for(var i=0; i<fm.sex.length; i++){          // 循環單選按鈕;     if(fm.sex[i].checked == true){           // 遍歷每一個,找出處于選中狀態的那一個;      alert(fm.sex[i].value);            // 得到值;    }  }  // PS:除了checked屬性之外,單選按鈕還有一個defaultChecked按鈕,  // 它獲取的是原本的checked按鈕對象,而不會因為checked的改變而改變;  if(fm.sex[i].defaultChecked == true){    alert(fm.sex[i].value);  }

// 通過checked屬性來獲取復選按鈕的值,  var love = '';  for(var i=0; i<fm.love.length; i++){    if(fm.love[i].checked == true){      love += fm.love[i].value;    }  }  alert(love);