點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript操作表單_動力節點Java學院整理

來源：懂視網責編：小采時間：2020-11-27 22:51:35

JavaScript操作表單_動力節點Java學院整理

JavaScript操作表單_動力節點Java學院整理:用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內容，或者對一個輸入框設置新的內容。 HTML表單的輸入控件主要有以下幾種： ᠊

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript操作表單_動力節點Java學院整理:用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內容，或者對一個輸入框設置新的內容。 HTML表單的輸入控件主要有以下幾種： ᠊

用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。

不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內容，或者對一個輸入框設置新的內容。

HTML表單的輸入控件主要有以下幾種：

文本框，對應的<input type="text">，用于輸入文本；

口令框，對應的<input type="password">，用于輸入口令；

單選框，對應的<input type="radio">，用于選擇一項；

復選框，對應的<input type="checkbox">，用于選擇多項；

下拉框，對應的<select>，用于選擇一項；

隱藏文本，對應的<input type="hidden">，用戶不可見，但表單提交時會把隱藏文本發送到服務器。

獲取值

如果我們獲得了一個<input>節點的引用，就可以直接調用value獲得對應的用戶輸入值：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'

這種方式可以應用于text、password、hidden以及select。但是，對于單選框和復選框，value屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是用戶是否“勾上了”選項，所以應該用checked判斷：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

設置值

設置值和獲取值類似，對于text、password、hidden以及select，直接設置value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內容已更新

對于單選框和復選框，設置checked為true或false即可。

HTML5控件

HTML5新增了大量標準控件，常用的包括date、datetime、datetime-local、color等，它們都使用<input>標簽：

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">

不支持HTML5的瀏覽器無法識別新的控件，會把它們當做type="text"來顯示。支持HTML5的瀏覽器將獲得格式化的字符串。例如，type="date"類型的input的value將保證是一個有效的YYYY-MM-DD格式的日期，或者空字符串。

提交表單

最后，JavaScript可以以兩種方式來處理表單的提交（AJAX方式在后面介紹）。

方式一是通過<form>元素的submit()方法提交一個表單，例如，響應一個<button>的click事件，在JavaScript代碼中提交表單：

<!-- HTML -->
<form id="test-form">
 <input type="text" name="test">
 <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
 var form = document.getElementById('test-form');
 // 可以在此修改form的input...
 // 提交form:
 form.submit();
}
</script>

這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器默認點擊<button type="submit">時提交表單，或者用戶在最后一個輸入框按回車鍵。因此，第二種方式是響應<form>本身的onsubmit事件，在提交form時作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
 <input type="text" name="test">
 <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
 var form = document.getElementById('test-form');
 // 可以在此修改form的input...
 // 繼續下一步:
 return true;
}
</script>

注意要return true來告訴瀏覽器繼續提交，如果return false，瀏覽器將不會繼續提交form，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交form。

在檢查和修改<input>時，要充分利用<input type="hidden">來傳遞數據。

例如，很多登錄表單希望用戶輸入用戶名和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發人員會直接修改<input>：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
 <input type="text" id="username" name="username">
 <input type="password" id="password" name="password">
 <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
 var pwd = document.getElementById('password');
 // 把用戶輸入的明文變為MD5:
 pwd.value = toMD5(pwd.value);
 // 繼續下一步:
 return true;
}
</script>

這個做法看上去沒啥問題，但用戶輸入了口令提交時，口令框的顯示會突然從幾個*變成32個*（因為MD5有32個字符）。

要想不改變用戶的輸入，可以利用<input type="hidden">實現：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
 <input type="text" id="username" name="username">
 <input type="password" id="input-password">
 <input type="hidden" id="md5-password" name="password">
 <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
 var input_pwd = document.getElementById('input-password');
 var md5_pwd = document.getElementById('md5-password');
 // 把用戶輸入的明文變為MD5:
 md5_pwd.value = toMD5(input_pwd.value);
 // 繼續下一步:
 return true;
}
</script>

注意到id為md5-password的<input>標記了name="password"，而用戶輸入的id為input-password的<input>沒有name屬性。沒有name屬性的<input>的數據不會被提交。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript操作表單_動力節點Java學院整理

推薦度：

點擊下載本文 文檔為doc格式

標簽：表單節點動力節點java學院整理

熱門焦點

JavaScript操作表單_動力節點Java學院整理

JavaScript操作表單_動力節點Java學院整理

JavaScript操作表單_動力節點Java學院整理

最新推薦

猜你喜歡

熱門推薦