JS 學習筆記 7_表單腳本

##1. 獲取表單及表單元素引用的方式##

var mForm = document.forms[formName];獲取表單引用

mForm.elements[elemName] 獲取表單元素，如有同名的，則得到一組元素（例如 radio button）

##2. 表單元素的常用屬性、方法和事件##

屬性：

• name：欄位名

• value：欄位值

• type：欄位型別，例如 button, radio 等等

• readOnly：設定只讀

• disabled：設定禁用

方法：

• focus()：獲得焦點

• blur()：取消焦點

事件：

• focus：獲得焦點時觸發

• blur：失去焦點時觸發

• change：文字方塊 input 和文字域 textarea 在失去焦點且 value 值改變時觸發，下拉列表框 select 選項改變時觸發

##3. 提交表單的方式##

1. 按鈕提交

2. 程式碼提交：form.submit();

3. 回車提交：在除 textarea 外的任意表單域中按 Enter

注意：

1. 程式碼提交不會觸發 submit 事件，因此必須在這之前驗證表單資料

2. 程式碼重置會觸發 reset 事件，但在實際應用中並不常用 reset 功能，因為如果誤操作點了重置的話會很傷

##4. 幾種提交按鈕##

1. 通用提交按鈕：<input type="submit">

2. 自定義提交按鈕：<button type="submit"></button>

3. 影象按鈕：<input type="image" src=url>

4. 其它非按鈕元素：<a href=url onclick="forms['mForm'].submit();">提交</a>

注意：高程上說只有當表單裡有前三種按鈕之一時，按下 Enter 鍵才會提交表單，但本機在 IE8，FF,Chrome 中測試發現都可以提交（就算表單中只有個文字方塊，回車也能提交）

##5. 文字方塊/文字域（input/textarea）選中部分/全部內容##

主流方式：

var text = document.forms[0].elements['userName'];
text.select();//全選
text.setSelectionRange(0, 3);//選擇前 3 個字元（3 個漢字或者字母）

[IE8-] 設定/獲取選中文字的方式與主流方式不同，設定選中的方式如下：

var range = text.createTextRange();
range.collapse();//把範圍摺疊到開始位置
range.moveStart('character', 0);
range.moveEnd('character', 3);
range.select();

P.S. 選中在實現自動補全文字方塊時比較常用，例如瀏覽器的 URL 輸入方塊

##6. 訪問剪下簿##

對於訪問剪下簿，各瀏覽器的實現有差異，甚至有些瀏覽器不支援訪問剪下簿，所以不要試圖修改不合適的剪下簿內容以求驗證通過，而應該阻止這些事件的預設行為，甚至在必要的時候可以禁用組合鍵

可以通過取消 paste/cut/copy 事件的預設行為來禁用剪下簿

##7.select 的常用屬性和方法##

屬性：

• options 獲取 select 的所有 Option
• selectedIndex 獲取選中項的索引（沒有選中為 -1，多選為第一個選中項的索引）

方法：

• add(newOption, relOption); 在 relOption 前插入 newOption
• remove(index); 移除索引為 index 的 Option

##8.option 的常用屬性和方法##

屬性：

• selected 設定選中

• index 獲取該項在 options 中的索引

方法：

• 新增 Option：

   var newOption(text, value);//一般 text 和 value 相同，value 用於提交資料
   selectbox.add(newOption, undefined);//在末尾插入
  

• 移除 Option：

   selectbox.remove(index);//移除第 index 項
   while(selectbox.options.length){//移除所有項
     selectbox.remove(0);
   }
  

##9. 實現富文字方塊的兩種方式##

1. 插入 iframe，設定 src 為空文件，並設定 frames[iframeName].document.designMode = 'on';即可實現 body 可編輯

2. 設定任意元素的 contentEditable 屬性，例如 p.contentEditable = 'true';可以實現任意元素可編輯

注意：

1. 上面給出的兩種方式都是全瀏覽器相容的，不必擔心 contentEditable 是 HTML5 屬性，因為 IE 在很多年前就實現了它，本機測試 [IE6+] 都支援

2. contentEditable 注意大寫的 E，小寫無效

3. 富文字方塊並不是表單元素，所以不會自動提交，需要用隱藏表單欄位來攜帶富文字內容

4. 雖然支援對富文字方塊內容的格式化（加粗、設定前/背景顏色等等），但各個瀏覽器的具體實現不同，因而相同的命令可能生成不同的文字內容