《JavaScript高級程序設(shè)計》學(xué)習(xí)筆記（表單和數(shù)據(jù)完整性）

特性：
method 屬性 設(shè)置或獲取如何將表單數(shù)據(jù)發(fā)送到服務(wù)器
action 屬性 設(shè)置或獲取表單內(nèi)容要發(fā)送處理的 URL
enctype 屬性 設(shè)置或獲取表單發(fā)送的編碼方式。默認(rèn)是application/x-www-form-urlencoded，如果要上傳文件要設(shè)成multipart/form-data。
accept 屬性 上傳文件時，列出服務(wù)器能正確處理的mime類型
acceptCharset 屬性 設(shè)置或獲取處理表單的服務(wù)器必須接受的字符編碼

輸入元素：
元素 主要的HTML輸入元素
通過type屬性確定控件：
text radio checkbox file password button submit reset hidden image
元素 組合框或下拉框，值由元素定義
元素 多行文本，尺寸由rows和cols特性確定</p> <p><label/> 元素 將標(biāo)簽綁定到特定的表單字段<br />for 屬性 指定綁定的表單id<br />當(dāng)鼠標(biāo)點擊label容器，焦點將移到指定表單上<br />例如：<br /><input type="radio" name="r1" id="r1"/><label for="r1">已綁定</label><br/><br /><input type="radio" name="r2" id="r2"/>無綁定</p> <p>建議在每個表單字段都設(shè)置id和name屬性，且值相等。（name用于數(shù)據(jù)提交，id用戶客戶端確定元素）</p> <p> </p> <p>對<form/>元素進行腳本編寫</p> <p><br />獲取表單引用<br />1 用getElementById()<br />例如：var oForm = document.getElementById("form1");</p> <p>2 用document的form集合，并通過位置或name屬性引用<br />例如：var oForm = document.forms[0];<br />或者：var oForm = document.forms["form1"];</p> <p><br />訪問表單字段<br />1 通過表單的elements集合，并通過位置或name屬性引用<br />例如：var oElm = oForm.elements[0];<br />或者：var oElm = oForm.elements["elm"];</p> <p>2 直接通過name屬性訪問<br />例如：var oElm = oForm.elm;<br />如果名字中有空格可以用方括號：<br />var oElm = oForm["elm 1"];</p> <p>3 用getElementById()<br />例如：var oElm = document.getElementById("elm1");</p> <p><br />表單字段共性<br />所有表單字段（除隱藏字段）：<br />disabled 屬性 設(shè)置或獲取控件是否被禁用<br />form 屬性 獲取對象所在表單的引用<br />blur() 方法 使元素失去焦點并觸發(fā)onblur事件<br />focus() 方法 使元素得到焦點并觸發(fā)onfocus事件<br />onblur 事件 元素失去焦點時觸發(fā)<br />onfocus 事件 元素得到焦點時觸發(fā)</p> <p>注意：隱藏字段（hidden）只有form屬性</p> <p><br />提交表單<br />1 使用提交按鈕或提交圖象提交表單<br />例如：<br /><input value="submit" type="submit" /><br /><input src="submit.gif" type="image" /><br />當(dāng)客戶點擊以上按鈕將提交表單，如果按回車，并存在這些按鈕，瀏覽器會認(rèn)為點擊了按鈕</p> <p>2 獲取表單引用，再使用submit()方法<br />例如：<br />document.getElementById("form1").submit();<br />用button模擬submit：<br /><input value="submit" type="button" onclick="this.form.submit();" /></p> <p>onsubmit 事件 表單提交時觸發(fā)<br />例如；<br /><form onsubmit="alert('提交');"></p> <p>注意：如果是使用submit()方法提交，將不會觸發(fā)submit事件</p> <p><br />僅提交一次<br />方法：用戶點擊提交按鈕后，將其禁用<br />例如：<br /><input value="submit" type="button" onclick="this.disabled=true;this.form.submit();" /><br />注意：如果用submit類型按鈕，由于在表單提交前就已被禁用，將導(dǎo)致提交失敗</p> <p><br />重置表單<br />1 使用Reset按鈕<br />例如：<br /><input value="reset" type="reset" /></p> <p>2 獲取表單引用，再使用reset()方法<br />例如：<br />document.getElementById("form1").reset();<br />用button模擬submit：<br /><input value="reset" type="button" onclick="this.form.reset();" /></p> <p>onreset 事件 表單重置時觸發(fā)<br /><form onreset="alert('重置');"></p> <p>不同于submit()方法，使用reset()方法也會觸發(fā)reset事件</p> <p>注意：對于表單的默認(rèn)信息，重置后還是會保留的，對于沒有默認(rèn)信息的表單應(yīng)盡量避免使用</p> <p> </p> <p>文本框</p> <p>有兩種文本框：<br />單行文本框 <input type="text"/><br />size 屬性 文本框?qū)挾?br />value 屬性 文本框初始內(nèi)容<br />maxlength 屬性 文本框允許最大字符數(shù)<br />例如：<br /><input type="text" size="10" maxlength="20" value="請輸入內(nèi)容"/></p> <p>多行文本框 <textarea/><br />rows 屬性 以字符為單位文本框的高度<br />cols 屬性 以字符為單位文本框的寬度<br /><textarea/>的初始值包含在標(biāo)簽之間<br />例如：<br /><textarea rows="9" cols="5">請輸入內(nèi)容
而且不能指定允許最大字符數(shù)</p> <p><br />獲取/更改文本框的值<br />value 屬性 獲取或設(shè)置文本框文本<br />value.length 屬性 獲取文本框中文本長度</p> <p><br />選擇文本<br />select() 方法 選中文本框中所有文本（必須已經(jīng)獲得焦點）<br />為確保文本框獲得焦點，最好在調(diào)用select()前調(diào)用focus()<br />例如：<br /><input type="text" id="txt"/><br /><input value="選擇" type="button" onclick="txt.focus();txt.select();" /></p> <p><br />文本框事件<br />除了blur和focus事件，還支持change和select事件<br />change 事件 用戶更改內(nèi)容并失去焦點時觸發(fā)<br />注意：通過value屬性更改內(nèi)容將不會觸發(fā)，而且觸發(fā)時先觸發(fā)change事件，再觸發(fā)blur事件<br />select 事件 當(dāng)一個或多個字符被選中時觸發(fā)<br />無論手工還是select()方法，與焦點無關(guān)</p> <p><br />自動選擇文本<br />例如：<br /><input type="text" onfocus="this.select()"/><br /><textarea onfocus="this.select()">

自動切換到下一個
通過表單的elements集合，獲取下一個表單元素

限制textarea的字符數(shù)
例如：

允許/阻止文本框中的字符
用于驗證用戶數(shù)據(jù)，或阻止無效數(shù)據(jù)輸入

阻止無效字符
設(shè)定要阻止的字符，再檢測輸入字符的charCode是否要阻止的字符

允許有效字符
設(shè)定允許的字符，再檢測輸入字符的charCode是否允許的字符

對于粘貼內(nèi)容
1 禁止粘貼
ie中，用onpaste事件阻止粘貼行為，其他還需要用oncontextmenu事件
例如：
對于用Ctrl+V進行的粘貼，可根據(jù)charCode和ctrlKey判斷按鍵是否Ctrl+V

2 失去焦點驗證
在onblur事件中檢測
注意：不能在onchange事件中檢測，當(dāng)?shù)谝淮螜z測時能正常發(fā)現(xiàn)不正確內(nèi)容，這時焦點回到原來文本框，但如果第二次并沒有修改不正確的內(nèi)容，所以沒有觸發(fā)onchange事件，即沒有觸發(fā)檢測事件直接跳過了。

使用上下鍵操作數(shù)字文本
在onkeydowm事件中操作

列表框和組合框

列表框和組合框通過HTML的

元素來創(chuàng)建。
size 屬性 同時可見的條目個數(shù)

訪問選項
HTML DOM為每個元素定義了 options 集合
獲取顯示文本和值：
一般DOM方法：
oListbox.option[1].firstchild.nodevalue;
oListbox.option[1].getAttribute("value");
HTML DOM方法：
oListbox.option[1].text;
oListbox.option[1].value;

index 屬性 表示在options集合中的位置
例如：oListbox.option[1].index; //1

length 屬性 表示選項數(shù)目
例如：oListbox.options.length;

獲取/更改選中項
select：
selectedIndex 屬性 選中的選項的索引（沒有選中時為-1）
multiple 屬性 設(shè)為"multiple"時可以在列表框中選擇多個選項
如果選中多個選項，selectedIndex將包含第一個選項的索引

option：
selected 屬性 表示選項是否被選中
通過對選項循環(huán)判斷selected屬性，獲取所有選中選項的索引

添加選項
用javascript添加選項：
1 使用DOM方法創(chuàng)建

元素
var oOption = document.createElement("option");
2 創(chuàng)建文本節(jié)點，并分配名稱
oOption.appendChild(document.createTextNode(sName));
3 設(shè)置選項的值
oOption.setAttribute("value", sValue);
4 將選項添加到列表框中
oListbox.appendChild(oOption);

刪除選項
用javascript刪除選項：
1 將要刪除的選項設(shè)置為null
oListbox.options[1] = null;
2 使用remove()方法，參數(shù)為要刪除的選項的索引
oListbox.remove(0);
注意：如果用循環(huán)來刪除多個選項，最好從最大的索引開始操作，因為刪除后index索引會重置

移動選項
把選項從一個列表框移動到另一個列表框：
1 獲取要移動的選項的引用
var oOption = oListboxFrom(iIndex);
2 在另一個列表框中使用appendChild()方法添加該選項，同時該選項會從當(dāng)前列表框中刪除
oListboxTo.appendChild(oOption);
注意：跟刪除選項一樣，如果要移動多個選項，最好從最大的索引開始操作

重新排序選項
將選項進行重新排序，包括向上和向下移動：
1 獲取要移動的選項的引用
var oOption = oListbox(iIndex);
2 獲取要移動的位置的選項
向上移動：var oPrevOption = oListbox.options[iIndex-1];
向下移動：var oNextOption = oListbox.options[iIndex+1];
3 使用insertBefore()方法重新設(shè)置位置
向上移動：oListbox.insertBefore(oOption, oPrevOption);
向下移動：oListbox.insertBefore(oNextOption, oOption);

創(chuàng)建自動提示的文本框

這種文本框會檢查用戶輸入的頭幾個字符，然后給出幫助用戶輸入的列表

匹配
搜索字符串?dāng)?shù)組并返回以特定字符開頭的所有值：
1 創(chuàng)建用于存儲所有匹配的值的數(shù)組
var arrResule = new Array;
2 確保進行匹配的字符串非空，再循環(huán)找出匹配的每個值，并添加到數(shù)組中
if(arrValues[i].indexof(sText)==0) arrResult.push(arrResule[i]);
建議：在得到匹配數(shù)組后最好用sort方法排序，對于字符串可結(jié)合localeCompare方法

內(nèi)部機制
使用keyup事件調(diào)用提示程序
1 清空列表框（參考刪除選項）
2 把匹配數(shù)組的值插入到列表框（參考添加選項）
3 給列表框的選項添加onclick事件，將文本框內(nèi)容設(shè)置為當(dāng)前選中的選項
注意：由于匹配過程是區(qū)分大小寫的，建議先將字符串轉(zhuǎn)為小寫或大寫

[@more@]

向AI問一下細節(jié)

推薦閱讀：

1. PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（六）
2. PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（五）

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

javascript高級程序設(shè)計 學(xué)習(xí) 筆記

• 上一篇新聞：
  千鋒java視頻教程：Java微服務(wù)架構(gòu)2.0教程資源直接送
• 下一篇新聞：
  什么是業(yè)務(wù)影響分析?企業(yè)應(yīng)如何執(zhí)行

猜你喜歡

• linux用gcc編譯完怎么運行
• c++ string如何轉(zhuǎn)int64
• c++ string如何刪除指定字符
• c++如何切分字符串
• c++如何編譯動態(tài)庫
• c++如何實現(xiàn)反射
• c++中this指針的作用是什么
• java怎么定義包的關(guān)鍵字
• java怎么定義一個空數(shù)組
• java中的位運算有什么作用

最新資訊

• PHP日志記錄如何避免Log4j類似漏洞
• PHP日志管理策略調(diào)整防范Log4j風(fēng)險
• Log4j事件對PHP日志安全的影響分析
• PHP日志系統(tǒng)如何預(yù)防遠程代碼執(zhí)行
• PHP日志處理Log4j之外的安心之選
• Log4j漏洞后PHP日志審計要點
• PHP日志管理新方向：后Log4j時代
• PHP項目如何確保日志安全非Log4j
• PHP日志記錄策略調(diào)整應(yīng)對Log4j
• Log4j漏洞啟示：PHP日志安全加固

相關(guān)推薦

• PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（四）
• PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（三）
• PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（二）
• PHP、MySQL和JavaScript學(xué)習(xí)手冊筆記（一）
• JavaScript學(xué)習(xí)筆記（一）
• JavaScript學(xué)習(xí)筆記（五）
• JavaScript學(xué)習(xí)筆記（三）
• JavaScript學(xué)習(xí)筆記（二）
• JQuery學(xué)習(xí)筆記-表單選擇器
• Vue學(xué)習(xí)筆記之表單輸入控件綁定

相關(guān)標(biāo)簽

juniper netscreen javadoc java 高并發(fā) 繼續(xù)學(xué)習(xí) part1 principle ipy模塊 java線程 java 8 pipe函數(shù) 本機ip java nio scripts java對象 虛擬ip background-clip java爬蟲 ip6tables ipse 小tips swipelayout viper

AI
助
手

產(chǎn)品服務(wù)

• 云服務(wù)器
• 高防服務(wù)器
• 高防IP
• 裸金屬服務(wù)器
• 機柜租用
• SSL證書
• 高防CDN
• 彈性IP

地區(qū)劃分

• 中國香港服務(wù)器
• 美國服務(wù)器
• 德國服務(wù)器
• 日本服務(wù)器
• 韓國服務(wù)器
• 新加坡服務(wù)器

專題活動

• 控制臺
• 應(yīng)用市場
• 最新活動
• 九馬 智能直播

幫助支持

• 幫助中心
• 網(wǎng)站備案
• 法律條款
• 全國服務(wù)
• 安全漏洞
• 主題地圖

關(guān)于我們

• 關(guān)于億速云
• 客戶案例
• 新聞資訊
• 資訊地圖
• 問答地圖
• 聯(lián)系我們
• 人才招聘

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機網(wǎng)站二維碼

Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權(quán)所有

廣州億速云計算有限公司粵ICP備17096448號-1 粵公網(wǎng)安備 44010402001142號增值電信業(yè)務(wù)經(jīng)營許可證編號：B1-20181529