JavaScript之文字框指令碼（表單指令碼）
阿新 • • 發佈：2019-02-19
文字框指令碼
在HTML中，文字框的表現形式有兩種：一種是使用<input>元素且它的type屬性值為"text"來表示單行文字框。二種是使用<textarea>和</textarea>表示多行文字框。 要表示單選文字框，可以使用<input>元素且其type屬性值為“text”。通過size設定文字框中能夠顯示的字元數，通value設定文字框的初始值，通過maxlength設定可以接收的最大字元數。例如，讓它能夠顯示25字元數，最大顯示字元數為50，初始值為10：<input type="text" id="input1" size="25" maxlength="50" value="10">
要多行文字框，可以使用<textarea>元素，rows表示文字框的字元行數，cols表示文字框的字元列數。 <textarea>與<input>的不同之處在於： 1、<textarea>的初始值必需放在<textarea>與</textarea>之間。 2、不能在HTML中為<textraea>指定最大字元數。（意味著在JavaScript中能指定）
<textarea rows="10" cols="20">
初始值
</textarea>這兩個元素的初始值都儲存在各自的value屬性中，也可以通過value這個屬性來讀取和設定文字的值。
<body> <form id="myForm" action="" method="get"> <input type="text" id="input1" value="20"> <textarea id="textbox" rows="10" cols="20">30</textarea> </form> <script> var myForm = document.querySelector("#myForm"); //獲取表單中的第一個欄位 var textbox = myForm.elements[0]; console.log(textbox.value); //20 //設定該欄位的值 textbox.value = "100"; console.log(textbox.value); //100 //獲取表單中的第二個欄位 var text = myForm.elements[1]; console.log(text.value); //30 //設定該欄位的值 text.value = "200"; console.log(text.value); //200 </script> </body>
注：建議就像以上使用文字框的value屬性來讀取和設定文字的值。不建議使用DOM操作來讀取和設定（也就是不使用setAttribute()設定<input>的value值，也不要去修改<textarea>的值）。因為對value屬性所修改的值，不一定會反映在DOM結構中。
選擇文字
select()方法用於選擇文字框中的所有文字。在呼叫select()方法時，就會將焦點設定到文字框中。<body> <form id="myForm" action="" method="get"> <input type="text" id="input1" value="20"> <textarea id="textbox" rows="10" cols="20">30</textarea> </form> <script> var myForm = document.querySelector("#myForm"); //獲取表單中的第一個欄位 var textbox = myForm.elements[0]; //選擇文字，就會獲取焦點 textbox.select(); </script>
以上例子，當頁面載入完成後，表單中的第一個欄位就會獲得焦點，表示已經被選擇。 在文字框獲得焦點時選擇文字，是一種常見的做法。特別是在文字框有預設值的情況下，這樣使用者就不必一個一個地刪除文字了。
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.addEventListener("focus", function (e) {
var target = e.target;
target.select();
console.log("selected");
});
當文字框獲取焦點時，就會選擇其中所有的文字。
選擇(select)事件
在選擇了文字框的文字時，就會觸發select事件。只有使用者選擇了文字（而且要釋放了滑鼠），才會觸發select事件。
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.addEventListener("select", function (e) {
console.log("觸發了select事件");
});
當用戶選擇了文字框中所有文字時，就會觸發select事件，那麼就會返回"觸發了select事件"。 效果：
取得選擇的文字
有時，使用者選擇了文字框中的文字，但卻不知道選擇的內容，HTML5給予了擴充套件，添加了兩個屬性：selectionStart和selectionEnd。這個兩個屬性中儲存著基於0的數值，表示 所選文字的範圍（即文字選區的開始和結尾的偏移量）。 注：substring(a, b)方法表示提取字串中 介於兩個指定下標a,b之間的字元。 取得選擇文字的方法：textbox.value.substring(textbox.selectStart, textbox.selectEnd); 這個方法用於取得文字框的所有文字內容。 <body>
<form id="myForm" action="" method="get">
<input type="text" id="input1" value="這是初始值">
<textarea id="textbox" rows="10" cols="20">30</textarea>
</form>
<script>
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
//選擇文字框中的文字
textbox.addEventListener("select", function (e) {
console.log(getSelectText(textbox)); //呼叫getSelectText函式
});
//獲取選擇的內容
function getSelectText (textbox) {
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}
</script>
</body>
效果：
其中，selectStart和selectEnd分別表示所選文字字串的開始下標各結尾下標。 對於IE8來說，使用document.selection物件，其中儲存著使用者在整個頁面內選擇的文字資訊。也就是說，無法確定使用者是選擇了頁面中的哪個部分，可以和select事件一起使用，假設使用者選擇了文字框，並觸發該事件。要想取得選擇的文字，首先必須建立一個範圍，然後再將文字內容提取出來。
function getSlectText (textbox) {
return document.selection.createRange().text;
}這裡首先用"createRange()"建立了一個範圍來假設選擇的是文字框中的文字，再使用".text"屬性提取文字內容。
取得文字框中部分文字
HTML5提供了一個叫setSelectionRange()方法用於取得文字框中的部分文字。除了select()方法外，所有文字框都有一個setSelectionRange()方法，它接收兩個引數：要選擇的第一字元的索引和要選擇的最後一個字元之後的索引。注：第二個引數是不包括本索引位置的內容。這個方法與slice()和substring()方法類似。
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.value = "hello JavaScript"; //設定了文字的值
//選擇所有文字
textbox.setSelectionRange(0, textbox.value.length); //"hello JavaScript"
//選擇前4個字元
textbox.setSelectionRange(0, 4); //"hell"
//選擇第2到第4個字元
textbox.setSelectionRange(1, 5); //"ell"
對於IE8，要選擇文字框中的部分文字，必須首先使用IE在所有文字框中提供的 createTextRange()方法建立一個文字範圍，並將其放在恰當的位置上。然後，使用moveStart()和moveEnd()這兩個範圍方法將範圍移動到位。在使用這兩個方法之前，先使用collapse()方法將範圍摺疊到文字框的開始位置。此時moveStart()方法將範圍的起始點和終點移動到了相同的位置，只要再給moveEnd()傳入要選擇的字元總數即可。最後使用select()方法選擇文字。
<body>
<form id="myForm" action="" method="get">
<input type="text" id="input1" value="這是初始值">
<textarea id="textbox" rows="10" cols="20">30</textarea>
</form>
<script>
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.value = "hello JavaScript"; //設定了文字的值
//建立文字範圍
var range = textbox.createTextRange();
//選擇所有文字
range.collapse(true); //將範圍摺疊到文字的開始位置
range.moveStart("character", 0); // 將起始點和終點移動到了文字索引0的位置
range.moveEnd("character", textbox.value.length); //傳入的字元總數為全部字元數 "hello JavaScript"
range.select(); //選擇文字
//選擇前4個字元
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 4); "hell"
range.select();
//選擇第2個到第4個字元
range.collapse(true);
range.moveStart("character", 1);
range.moveEnd("character", 3); //傳入要選擇的字元總數。
range.select();
</script>
</body>
要實現跨瀏覽器的選擇文字框中的文字內容，可以將以上的兩種方法組合起來使用，這樣無論是主瀏覽器還是IE8瀏覽器都可以使用組合方法來選擇要選擇的文字。 也就是說在選擇文字前，先判斷瀏覽器是否支援setSelectionRange()方法或createTextRange()方法。
function selectText (textbox, startIndex, stopIndex) {
if (textbox.setSelectionRange) {
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange) {
var range = textbox.createTextRange();
range.collapse(true); //將範圍摺疊到文字框的開始位置
range.moveStart("character", startIndex); //將範圍的起始點和終點移動到同一位置
range.moveEnd("character", stopIndex - startIndex); //傳入要選擇的字元總數
range.select(); //選擇文字
}
}
其中，textbox表示要操作的文字框（也就是表單的欄位），startIndex表示要選擇文字中第一個字元的索引，stopIndex表示要選擇文字中最後一個字元之後的索引。 使用以上的組合方法來選擇想要選擇的文字內容：
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.value = "hello JavaScript";
//選擇所有文字
selecText(textbox, 0, text.value.length); //"hell JavaScript"
//選擇前4個字元
selectText(textBox, 0, 4); //"hell"
//選擇第2個字元到第4個字元
selectText(textbox, 1, 4); //"ell"
在提供自動完成建議的文字框就可以使用這種組合方式。
過濾輸入
我們經常要求使用者在文字框輸入特定的資料，或者輸入特定格式的資料。例如：包含某些字元，或不包含非數值等。或匹配某種模式。由於文字框在預設的情況沒有提供多少驗證資料的手段。因此需要藉助JavaScript來完成此類的驗證。綜合使用事件和DOM操作，可以將普通的文字框轉變成能夠理解使用者輸入的多功能型控制元件。遮蔽字元
有時候需要使用者輸入不包含某此字元的資料。例如：電話號碼中不能包含非數值等操作。響應文字框插入字元的是keypress鍵盤事件。我們可以通過遮蔽（阻止行為）的方式來遮蔽使用者輸入的非要求輸入的內容。使用preventDefault()方法來阻止行為。 例如：要求使用者輸入數值，用preventDefault()方法來遮蔽使用者輸入的非數值。String.fromCharCode()方法用於將字元編碼轉換成字元。（在基本包裝型別的String型別中學習過） <body>
<form id="myForm" action="" method="get">
<input type="text" id="input1" >
<textarea id="textbox" rows="10" cols="20">30</textarea>
</form>
<script>
var myForm = document.querySelector("#myForm");
//獲取表單中的第一個欄位
var textbox = myForm.elements[0];
textbox.addEventListener("keypress", function (e) {
var target = e.target; //獲取事件目標
var charCode = e.charCode; //字元編碼
console.log(e.charCode); //檢視輸入的字元的編碼
//判斷使用者輸入的是否為非數值
if (!/\d/.test(String.fromCharCode(charCode))) {
e.preventDefault(); //如果輸入的是非數值，則遮蔽輸入的字元
}
});
</script>
</body>
效果：
我們先在文字框中輸入了123，均正常輸入進去了，接著再分別輸入字元q、w、e、r均未輸入成功，這樣看來，已經遮蔽了輸入的非數值字元。
自動切換焦點
增強表單欄位的易用性的常見方法就是：在使用者填寫完當前欄位時，自動將焦點切換到下一個欄位，通常是在使用者keyup之後才開始判斷是否需要切換到下一個欄位。也就是說，當用戶輸入完當前欄位文字時，JavaScript自動切換到下一個欄位，使用者可以繼續輸入文字，而無需使用者手動tab到下一個欄位。這樣使用者只管輸入資料內容即可，JavaScript會自動切換焦點的。通常是在使用者釋放按鍵後才開始判斷是否需要切換。
<body>
<form id="myForm" action="" method="get">
<input type="text" id="textTel1" name="tel1" maxlength="3">
<input type="text" id="textTel2" name="tel2" maxlength="3">
<input type="text" id="textTel3" name="tel3" maxlength="4">
</form>
<script>
(function () {
function tabForward (e) {
var target = e.target; //獲取當前欄位目標
//判斷使用者輸入的資料內容是否達到了最大字元字數，以下情況均在已輸入完了這個欄位的情況下觸發的。
if (target.value.length == target.maxlength) {
//獲取當前欄位所屬的表單
var form = target.form;
//
for (var i = 0, len = form.elements.length; i < len; i ++) {
//判斷當前的目標是不是正在操作的欄位
if (form.elements[i] == target) {
//如果當前目標是這個欄位，再判斷下一個欄位是否存在
if (form.elements[i + 1]) {
form.elements[i + 1].focus(); //如果下一個欄位存在，則將焦點切換到這下一個欄位
}
return;
}
}
}
}
var textTel1 = document.querySelector("#textTel1");
var textTel2 = document.querySelector("#textTel2");
var textTel3 = document.querySelector("#textTel3");
textTel1.addEventListener("keyup", tabForward);
textTel2.addEventListener("keyup", tabForward);
textTel3.addEventListener("keyup", tabForward);
})();
</script>
</body>
開始的tabForward()是實現自動切換焦點的關鍵所在。這個函式通過比較使用者輸入的值與文字框的maxlength特性，可以確定是否已達到最大字元數。如果已經達到最大字限制，則需要查詢該欄位所屬表單，直到找到下一個文字框，找到下一個文字框，將焦點切換到這個文字框。然後，為每個文字框新增onkeyup事件處理程式。因為keyup是在使用者輸入字元之後才觸發。這樣，使用者就不必通過按TAB製表符來切換到下一個表單欄位了。
HTML5驗證API
必填欄位屬性
required屬性表示該欄位必須填寫，才能切換到下一個欄位。是個布林值，true表示必須填寫，false表示不是必須填寫的。預設值為true。<input type="text" id="text1" required>如果使用者不填寫該欄位就切換到下一個欄位，那麼該欄位就會彈出提示，提示使用者填寫完這個欄位。
其它的type型別值（其它的輸入型別）
<input>的type屬性除了有text、password、button、submit外，HTML5還新增了一些型別，如：number(表示數值)、email(表示郵箱)、urll(表示網址)、date(表示日期部分)、month(表示日期中的年份和月份)、time(表示時間）、range(表示滾動條)等。
其中，number必須有min、max屬性。email必須輸入"@"，url必須輸入網址結構。
<form id="myForm" action="" method="get">
<input type="month"><br>
<input type="date"><br>
<input type="time"><br>
<input type="number" min="0" max="20"><br>
<input type="email"><br>
<input type="url"><br>
<input type="submit">
效果：
數值範圍
HTML5定義的一些輸入元素要求填寫某種基於數字的值。如：number、month、range、week等。
而對於一些輸入元素，可以指定min、max、step等屬性，分別表示最小的值、最大的值、從上一個值到下一個值之間的差值。
輸入模式
HTML5還為欄位新增了pattern屬性。這個屬性是一個正則表示式，用於匹配文字框中的值。
例如，只允許在文字框輸入數字值：
<input type="text" pattern="\d+">
檢測有效性
使用checkValidity()方法可以檢測表單中某個欄位是否有效，該方法是根據前面所學習的約束條件來判斷的。如：email表示輸入有效郵箱，如果輸入的郵箱是無效的，那麼這個方法返回false，相反，如果是有效的返回true。
if (document.forms[0].elements[0].checkValidity()) {
//欄位有效
} else {
//輸入的這個欄位無效
}