如何控制表單內tab鍵切換的順序

寫表單的時候，經常用鼠標點擊輸入框的行為是十分累人的，經常上網的同學估計都會使用tab鍵進行表單輸入框之間的切換。

在html代碼中有一個鍵盤屬性——tabindex，它可以設置訪問者在頁面中按tab鍵的順序。如下：

<input type="button" id="b1" tabindex="1" value="Button1" />
<input type="button" id="b2" tabindex="2" value="Button2" />
<input type="button" id="b3" tabindex="3" value="Button3" />

當用戶選擇第一個輸入框再按tab鍵，輸入框的焦點就會按照定義好的順序切換。 tabindex不僅可以用于輸入框間的切換，也可以用于鏈接之間的切換。方法和上面相同。在沒有定義屬性值的時候，tabindex的默認值是0。如果將tabindex設為負值（tabindex="-1"），這個元素會被排除在tab鍵切換的范圍之外。

錄入系統需要用戶輸入相關數據，但用戶習慣在excel中回車繼續輸入下一個項目。

<script type="text/javascript">
    function handleEnter (field, event) {
       var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        if (keyCode == 13) {
            var i;
            for (i = 0; i < field.form.elements.length; i++)
                if (field == field.form.elements[i])
                    break;
            do {
               i = (i + 1) % field.form.elements.length;
            }while(field.form.elements[i].type != 'text' )  //可擴展到其他比如select 值了，避開label
            field.form.elements[i].focus();
            //window.event.keyCode=9
            return false;
        }
        else
            return true;
    }
</script>

頁面

現代web開發中，表單是用戶與網站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數據變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結構、輸入類型、驗證方法和提交過程。

基本結構

HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結構如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內容，也有助于屏幕閱讀器等輔助技術。<form>標簽的action屬性定義了數據提交到服務器的URL，method屬性定義了提交數據的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數據格式和設備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數值輸入

<!-- 數值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗證方法

HTML5表單提供了內置的驗證功能，可以在數據提交到服務器之前進行檢查。

必填字段

<input type="text" name="username" required>

正則表達式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數的郵政編碼">

數值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數據將被發送到服務器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數據
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發送數據到服務器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創建一個FormData對象
  var formData = new FormData(form);
  
  // 創建一個空對象來存儲表單數據
  var formObject = {};
  
  // 將FormData轉換為普通對象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對象轉換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當點擊按鈕時會調用submitForm函數。
在submitForm函數中，我們首先獲取表單元素并創建一個FormData對象。然后，我們遍歷FormData對象，將表單數據復制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉換成JSON字符串。
最后，我們使用alert函數彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結論

HTML5的表單功能為開發者提供了強大的工具，以便創建功能豐富、用戶友好且安全的網站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數據是有效的，同時提高用戶體驗。隨著技術的不斷進步，HTML5表單和相關API將繼續發展，為前端工程師提供更多的可能性。

言

在 HTML 中使用 <form> 表單元素在 JavaScript 中對應的是 HTMLFormElement 類型，而HTMLFormElement繼承了HTMLElement接口：

interface HTMLFormElement extends HTMLElement {
    ...
}

因此，HTMLFormElement 除了與 HTMLElement有一樣的屬性和方法外，還有自己獨有的屬性和方法：

acceptCharset：服務器可以接收的字符集，等價于 HTML 的 accept-charset 屬性。
action：請求的 URL，等價于 HTML 的 action 屬性。
elements：表單中所有控件的 HTMLCollection。
enctype：請求的編碼類型，等價于 HTML 的 enctype 屬性。
length：表單中控件的數量。
method：HTTP 請求的方法類型，通常是 get 或 post，等價于 HTML 的 method 屬性。
name：表單的名字，等價于 HTML 的 name 屬性。
target：用于發送請求和接收響應的窗口的名字，等價于 HTML 的 target 屬性。
reset()：把表單字段重置為各自的默認值，如果沒有默認值，則為空。
submit()：提交表單。

如果想要獲取 <form> 表單元素的引用，需要使用 DOM 選擇器進行查找，如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 這些方法，下面使用 getElementById() 方法獲取表單，只要給表單設置一個 id 屬性即可：

let form = document.getElementById("form-id");

Document中的<form>是document.forms的成員，因此可以通過索引或表單的 name 來訪問特定的表單。如下所示：

// 文檔中第一個元素
let firstForm = document.forms[0];
// 取得名字為"form-name"的表單
let formName = document.forms["form-name"];

注意：表單可以同時擁有id和name，且兩者可以不相同。

提交表單

一般情況下，<form>表單元素是通過客戶端用戶點擊的方式發送表單數據。而定義提交按鈕主要有：

定義使用 type=“submit” 屬性值的 <input> 元素，如 <input type="submit" value="提交">。
定義使用 type="submit" 屬性值的 <button> 元素，如 <button type="submit">提交</button>。
定義使用 type="image" 屬性值的 <input> 元素，如 <input type="image" src="submit.gif">。

這種方式提交表單會在請求之前觸發 submit 事件。這就提供了一個驗證表單數據的機會，可以根據驗證結果來決定表單是否要提交。如下所示：

let form = document.getElementById("form-id");
form.addEventListener("submit", (event) => {
    // 驗證表單
    if (...) {
        // 驗證失敗后，就要阻止表單提交
        event.preventDefault();
        return;
    } 
    // 這里用于驗證成功后將表單提交
});

調用 preventDefault() 方法可以阻止表單提交。通常，在表單數據無效以及不應該發送到服務器可以這樣處理。

也可以調用submit() 方法提交表單，表單中不存在提交按鈕也不影響提交。如下所示：

let form = document.querySelector("#form-id");
// 提交表單
form.submit();

通過 submit() 方法提交的表單，submit 事件不會觸發。因此在調用這個方法前要先做數據驗證。

表單提交的最大一個問題是可能會提交兩次。如果提交表單后沒有反應，那么沒有耐心的用戶可能會多次點擊提交按鈕。因此，解決這種方法主要有兩種：表單提交后禁用按鈕，或者通過 onsubmit 事件取消之后的表單提交。

重置表單

一般用戶填寫完表單信息后，想要重新填寫時，可以使用重置按鈕來重置表單。而定義重置按鈕主要有：

定義使用 type="reset" 屬性值的 <input>元素，如 <input type="reset" value="重置">。
定義使用 type="reset" 屬性值的 <button> 元素，如 <button type="reset">重置</button>

重置成功后，表單字段的值會重置為默認值；如果沒有默認值，則會為空。

重置按鈕可以觸發 reset 事件。這個事件為取消重置提供了機會。如下所示：

let form = document.getElementById("form-id");
form.addEventListener("reset", (event) => {
    event.preventDefault();
});

重置按鈕也可以調用 reset() 方法完成重置操作：

let form = document.getElementById("form-id");
// 重置表單
form.reset();

但 reset()方法會觸發 reset 事件。

注意：表單設計中通常不提倡重置表單。

表單字段

表單元素可以像頁面中的其它元素一樣使用原生 DOM 方法來訪問。此外，調用 elements 屬性為表單的有序列表，包含表單中所有標簽元素的引用，包括<input>、<textarea>、<button>、<select>和<fieldset>元素，并按照在 HTML 中出現的次序保存，通過索引和name屬性進行訪問。如下所示：

let form = document.getElementById("form-id");
// 取得表單中的第一個字段
let field1 = form.elements[0];
// 取得表單中名為"textbox-name"的字段
let field2 = form.elements["textbox-name"];
// 取得字段的數量
let fieldCount = form.elements.length;

如果多個表單控件使用同一個 name 值，比如 <input>元素設置type="radio"屬性為單選，就會返回包含所有同名元素的 HTMLCollection。如下所示：

<form method="post" id="form-id">
    <ul>
        <li><input type="radio" name="sex" value="男">男</li>
        <li><input type="radio" name="sex" value="女">女</li>
        <li><input type="radio" name="sex" value="未知">未知</li>
    </ul>
</form>

因此，訪問 elements["sex"] 返回的 NodeList 就包含著 3 個元素；而使用索引訪問時，就會返回當前位置的元素。如下所示：

let form = document.getElementById("form-id");
let sexes = form.elements["sex"];
console.log(sexes.length); // 3
let index_one = sexes[1];
let form_one = form.elements[1];
console.log(index_one === form_one); // true

公共屬性

除了 <fieldset> 元素以外，所有表單字段都有一組同樣的屬性。由于 <input> 類型可以表示多種表單字段，因此某些屬性只適用于特定類型的字段。除此之外的屬性可以在任何表單字段上使用。以下列出了這些表單字段的公共屬性和方法。

disabled：布爾值，表示表單字段是否禁用。
form：指針，指向表單字段所屬的表單。這個屬性是只讀的。
name：字符串，這個字段的名字。
readOnly：布爾值，表示這個字段是否只讀。
tabIndex：數值，表示這個字段在按Tab 鍵時的切換順序。
type：字符串，表示字段類型，如"checkbox"、"radio"等。
value：要提交給服務器的字段值。對文件輸入字段來說，這個屬性是只讀的，僅包含計算機上某個文件的路徑。

JavaScript 可以動態修改任何屬性，當然，form屬性除外。如下所示：

let form = document.getElementById("form-id");
let field = form.elements[0];
// 修改字段的值
field.value = "修改后的值";
// 檢查字段所屬的表單
console.log(field.form === form); // true
// 給字段設置焦點
field.focus();
// 禁用字段
field.disabled = true;
// 改變字段的類型（不推薦，但對<input>來說是可能的）
field.type = "checkbox";

動態修改表單字段屬性的能力為修改表單提供了方便。如當點擊兩次提交按鈕時，會在第一次提交后，通過監聽submit事件來實現禁用提交按鈕。如下所示：

// 避免多次提交表單的代碼
let form = document.getElementById("form-id");
form.addEventListener("submit", (event) => {
let target = event.target;
// 取得提交按鈕
let btn = target.elements["submit-btn"];
// 禁用提交按鈕
btn.disabled = true;
});

以上代碼，通過監聽 submit 事件，并在函數中獲取按鈕并設置disabled=true，來達到提交按鈕禁用。注意：這個功能不能通過直接給提交按鈕添加 onclick 事件進行實現，原因是不同瀏覽器觸發事件的時機不一樣。有些瀏覽器會在觸發表單的 submit 事件前先觸發 onclick 事件，有些瀏覽器會后觸發 onclick 事件。對于先觸發 onclick 事件的瀏覽器，這個按鈕會在表單提交前被禁用，這意味著表單不會被提交。因此，最好使用表單的 submit 事件進行禁用提交按鈕。但這種方式不適用于沒有提交按鈕的表單提交，因為，只有提交按鈕才能觸發 submit 事件。

type 屬性可以用于除<fieldset>之外的任何表單字段。對于<input>元素，這個值等于 HTML 的 type 屬性值。對于其他元素，這個 type 屬性的值按照下表設置。

描述	示例HTML	類型的值
單選列表	<select>...</select>	"select-one"
多項列表	<select multiple>...</select>	"select-multiple"
自定義按鈕	<button>...</button>	"submit"
自定義非提交按鈕	<button type="button">...</button>	"button"
自定義重置按鈕	<button type="reset">...</button>	"reset"
自定義提交按鈕	<button type="submit">...</button>	"submit"

對于<input>和<button>元素，可以動態修改其 type 屬性。但<select>元素的 type 屬性是只讀的。

公共方法

每個表單字段都有兩個公共方法：

focus()：把瀏覽器焦點設置到表單字段，該字段會變成活動字段并可以響應鍵盤事件。
blur()：從元素上移出焦點，焦點不會轉移到任何特定元素，僅僅是從調用這個方法的元素上移除。

給一個 focus() 方法的例子：

window.addEventListener("load", (event) => {
    document.forms[0].elements[0].focus();
});

上述情況就是在頁面加載后，把焦點定位到表單中的第一個字段。注意：如果表單中第一個字段是type="hidden"屬性的<input>元素，或者該字段被 CSS 屬性 display 或 visibility 隱藏，以上代碼就會出錯。

在 HTML5 中，表單字段增加了 autofocus 屬性，支持的瀏覽器會自動為帶有該屬性的元素設置焦點，無須使用 JavaScript。如下所示：

<input type="text" autofocus>

為了讓之前的代碼在使用autofocus時也能正常工作，必須先檢測元素上是否設置了該屬性。如果設置了 autofocus，就不再調用 focus()：

window.addEventListener("load", (event) => {
    let element = document.forms[0].elements[0];
    if (element.autofocus !== true) {
        element.focus();
    }
});

注意：默認情況下只能給表單元素設置焦點。不過，通過將 tabIndex 屬性設置為–1 再調用focus()，也可以給任意元素設置焦點。

再給一個 blur() 的例子：

document.forms[0].elements[0].blur();

在瀏覽器支持 readOnly 屬性之前，Web 開發者通常會使用這個方法創建只讀字段。現在很少有需要調用blur()的了。

公共事件

除了鼠標、鍵盤、變化和HTML 事件外，所有字段還支持以下 3 個事件：

blur：字段失去焦點時，會觸發該事件。
change：<input>和<textarea>元素的 value 發生變化且失去焦點時觸發，或者在<select>元素中選中項發生變化時觸發。
focus：在字段獲得焦點時觸發。

blur 和 focus 事件是用戶手動改變焦點或調用blur/focus方法時觸發。change事件是因控件不同而改變觸發時機。

<input> 和 <textarea>：change事件會在字段失去焦點，同時 value 自控件獲得焦點后發生改變時觸發。
<select>：change 事件會在用戶改變選中項時觸發，不需要控件失去焦點。

focus 和 blur 事件通常用于改變用戶界面，提供可見的提示或額外功能；change事件通常用于驗證用戶在字段中輸入的內容。比如，有的文本框可能只限于接收數值，focus 事件用來改變控件的背景顏色以便更清楚地表明當前字段獲得了焦點，blur 事件用于去掉這個背景顏色，change 事件用于在用戶輸入了非數值時把背景顏色改為紅色。如下所示：

let textbox = document.forms[0].elements[0];
textbox.addEventListener("focus", (event) => {
    let target = event.target;
    if (target.style.backgroundColor != "red") {
        target.style.backgroundColor = "yellow";
    }
});
textbox.addEventListener("blur", (event) => {
    let target = event.target;
    target.style.backgroundColor = /[^\d]/.test(target.value) ? "red" : "";
});
textbox.addEventListener("change", (event) => {
    let target = event.target;
    target.style.backgroundColor = /[^\d]/.test(target.value) ? "red" : "";
});

上述代碼中，onfocus 事件會把文本框的背景改為黃色，表明是當前活動字段。onblur 和 onchange 事件會在發現非數值字符時把背景改為紅色。為測試非數值字符，這里使用了簡單的正則表達式來檢測文本框的value。這個功能必須同時在 onblur 和 onchange 事件上實現，確保無論文本框是否改變都能執行驗證。

注意：blur 和 change 事件的關系并沒有明確定義。在某些瀏覽器中，blur事件會先于 change 事件觸發；在其它瀏覽器中，觸發順序會相反。因此不能依賴這兩個事件觸發的順序，必須區分時要多加注意。

總結

HTML 和 ECMAScript 都更新了好幾個版本，但是表單幾乎從來沒有改變。但是，通過 JavaScript 可以增加現有表單字段以提供新功能或增強易用性。也因此，表單字段也暴露了屬性、方法和事件供 JavaScript 調用使用。

在線咨詢

上一篇：你的HTML頁面書寫規范嗎？必須知道的HTML書寫規范
下一篇：Steam登錄不上/網頁打不開無法加載怎么辦最新解決方法分享

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商