整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中對應的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：
interface HTMLInputElement extends HTMLElement {
...
}HTMLInputElement 類型有一些獨有的屬性和方法：
而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關注一下，因為根據 type 屬性的改變，可以改變<input>的屬性。
類型 | 描述 |
text | 文本輸入 |
password | 密碼輸入 |
submit | 表單數據提交 |
button | 按鈕 |
radio | 單選框 |
checkbox | 復選框 |
file | 文件 |
hidden | 隱藏的字段 |
image | 定義圖像作為提交按鈕 |
reset | 重置按鈕 |
省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。
當 type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。
屬性 | 類型 | 描述 |
autocomplete | string | 字符串on或off，表示<input>元素的輸入內容可以被瀏覽器自動補全。 |
maxLength | long | 指定<input>元素允許的最多字符數。 |
size | unsigned long | 表示<input>元素的寬度，這個寬度是以字符數來計量的。 |
pattern | string | 表示<input>元素的值應該滿足的正則表達式 |
placeholder | string | 表示<input>元素的占位符，作為對元素的提示。 |
readOnly | boolean | 表示用戶是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小數值或日期。 |
max | string | 表示<input>元素的最大數值或日期。 |
selectionStart | unsigned long | 表示選中文本的起始位置。如果沒有選中文本，返回光標在<input>元素內部的位置。 |
selectionEnd | unsigned long | 表示選中文本的結束位置。如果沒有選中文本，返回光標在<input>元素內部的位置。 |
selectionDirection | string | 表示選中文本的方向。可能的值包括forward、backward、none。 |
下面創建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：
<input type="text" size="25" maxlength="50" value="initial value">HTML 使用的 <textarea> 元素在 JavaScript 中對應的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：
interface HTMLTextAreaElement extends HTMLElement {
...
}HTMLTextAreaElement 類型有一些獨有的屬性和方法：
下面創建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：
<textarea rows="25" cols="5">initial value</textarea>注意：處理文本框值的時候最好不要使用 DOM 方法，而應該使用 value 屬性。
<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內容。該方法的語法為：
select(): void下面看一個示例：
let textbox = document.forms[0].elements["input-box"];
textbox.select();也可以在文本框獲得焦點時，選中文本框的內容：
textbox.addEventListener("focus", (event) => {
event.target.select();
});當選中文本框中的文本或使用 select() 方法時，會觸發 select 事件。
let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
console.log(`Text selected: ${textbox.value}`);
});HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區的起點偏移量和終點偏移量。如下所示：
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}注意：在 IE8 及更早版本不支持這兩個屬性。
HTML5 提供了 setSelectionRange() 方法用于選中部分文本：
setSelectionRange(start, end, direction): void;下面看一個例子：
<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
function selectText() {
let input = document.getElementById("text-sample");
input.focus();
input.setSelectionRange(4, 8); // o Wo
}
</script>如果想要看到選中效果，必須讓文本框獲得焦點。
不同文本框經常需要保證輸入特定類型或格式的數據，或許數據需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現輸入過濾功能。
有些輸入框需要出現或不出現特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：
input.addEventListener("keypress", (event) => {
event.preventDefault();
});而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現只允許輸入數字的輸入框：
input.addEventListener("keypress", (event) => {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});還有一個問題需要處理：復制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：
textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});最后這個改動可以確保所有默認的文本框行為不受影響。這個技術可以用來自定義是否允許在文本框中輸入某些字符。
IE 是第一個實現了剪切板相關的事件以及通過JavaScript訪問剪切板數據的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規范。以下是與剪切板相關的 6 個事件：
剪切板事件的行為及相關對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發，但 IE 不僅在這種情況下觸發，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預期觸發。
在實際的事件發生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發送或從中檢索數據前修改數據。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。
剪貼板的數據通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數據的方法：
而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經授權訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}如果文本框只有數字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：
input.addEventListener("paste", (event) => {
let text = getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。
在 JavaScript 中，可以用在當前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設置 2 個文本框：
<form>
<input type="text" name="phone1" id="phone-id-1" maxlength="4">
<input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>當文本框輸入到最大允許字符數后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數據輸入。如下所示：
<script>
function tabForward(event){
let target = event.target;
if (target.value.length == target.maxLength){
let form = target.form;
for (let 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;
}
}
}
}
let inputIds = ["phone-id-1", "phone-id-2"];
for (let id of inputIds) {
let textbox = document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
</script>這里，tabForward() 函數通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環表中的元素集合找到當前文本框，并把焦點設置到下一個元素。
注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。
HTML5 新增了一些表單提交前，瀏覽器會基于指定的規則進行驗證，并在出錯時顯示適當的錯誤信息。而驗證會基于某些條件應用到表單字段中。
表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：
<input type="text" name="account" required>也可以通過 JavaScript 檢測對應元素的 required 屬性來判斷表單字段是否為必填項：
let isRequired = document.forms[0].elements["account"].required;也可以檢測瀏覽器是否支持 required 屬性：
let isRequiredSupported = "required" in document.createElement("input");注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。
HTML5 為 <input> 元素增加了幾個新的 type 值。如下所示：
類型 | 描述 |
number | 數字值的輸入 |
date | 日期輸入 |
color | 顏色輸入 |
range | 一定范圍內的值的輸入 |
month | 允許用戶選擇月份和年份 |
week | 允許用戶選擇周和年份 |
time | 允許用戶選擇時間（無時區） |
datetime | 允許用戶選擇日期和時間（有時區） |
datetime-local | 允許用戶選擇日期和時間（無時區） |
電子郵件地址的輸入 | |
search | 搜索（表現類似常規文本） |
tel | 電話號碼的輸入 |
url | URL地址的輸入 |
這些輸入表名字段應該輸入的數據類型，并且提供了默認驗證。如下所示：
<input type="email" name="email">
<input type="url" name="homepage">要檢測瀏覽器是否支持新類型，可以在 JavaScript 中創建 <input> 并設置 type 屬性，之后讀取它即可。老版本中會將我只類型設置為 text，而支持的會返回正確的值。如下所示：
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數字的類型，都可以指定 min/max/step 等幾個與數值有關的屬性。step 屬性用于規定合法數字間隔，如 step="2"，則合法數字應該為 0、2、4、6，依次類推。如下所示：
<input type="number" min="0" max="100" step="5" name="count">上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數。
也可以使用 stepUp() 和 stepDown() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數，用于表示加減的數值。如下所示：
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設置 <input> 元素的輸入模式了。如下所示：
<input type="text" pattern="\d+" name="count">注意模式的開頭和末尾分別假設有^和$。這意味著輸入內容必須從頭到尾都嚴格與模式匹配。
與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內容。模式會應用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：
let pattern = document.forms[0].elements["count"].pattern;使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：
let isPatternSupported = "pattern" in document.createElement("input");HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：
if (document.forms[0].elements[0].checkValidity()){
// 字段有效，繼續
} else {
// 字段無效
}要檢查整個表單是否有效，可以直接在表單上調用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：
if(document.forms[0].checkValidity()){
// 表單有效，繼續
} else {
// 表單無效
}validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態。返回的對象包含一些列的布爾值的屬性：
因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("請指定值.")
} else if (input.validity.typeMismatch){
console.log("請指定電子郵件地址.");
} else {
console.log("值無效.");
}
}通過指定 novalidate 屬性可以禁止對表單進行任何驗證：
<form method="post" action="/signup" novalidate>
<!-- 表單元素 -->
</form>也可以在 JavaScript 通過 noValidate 屬性設置，為 true 表示屬性存在，為 false 表示屬性不存在：
document.forms[0].noValidate = true; // 關閉驗證如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：
<form method="post" action="/foo">
<!-- 表單元素 -->
<input type="submit" value="注冊提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>也可以使用 JavaScript 設置 formNoValidate 屬性：
// 關閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;以上總結了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設置 type 屬性獲取不同類型的輸入框，可以通過監聽鍵盤事件并檢測要插入的字符來控制文本框的內容。
還有一些與剪貼板相關的事件，并對剪貼的內容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關的屬性和方法。
① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）
② C/S架構：Client/Server（客戶端/服務器的交互形式。）
① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?
?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。
?超文本：圖片、聲音、視頻等
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運行
④ HTML是誰制定的？
?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼
?HTML規范目前最高的版本是：HTML5.0，簡稱H5
?我們現在主要學的HTML4.0（基本用法）
?w3school：先出現的，和W3C無關
?w3cschool：后出現的，和W3C無關
?W3C制定了很多規范：HTML/XML/http協議/https協議……
頁面效果圖：
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務器發送請求。
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說明：
現表單控件的只讀和禁用設置。
先來看一個案例，在填寫"流調信息表"時，當點擊輸入框控件，光標會在輸入框里閃爍，等待我們輸入內容。此時，稱這個輸入框獲得了焦點。刷新一下頁面，再點擊一下這個輸入框控件左側的標題文本，發現這個輸入框也獲得了焦點，用戶填寫表單的體驗明顯增強了。
使用 HTML 如何實現這一功能呢?
實現這一功能，只需要在表單中添加 label 標簽就可以了。
label 是表單標簽的意思，基本語法為：尖角號 label，尖角號/label。label 標簽對屏幕閱讀器用戶很有用，因為當用戶關注輸入元素時，屏幕閱讀器會大聲讀出標簽。
label 還可以幫助我們點選難以點擊的 非常小的區域，比如單選按鈕或復選框，當用戶點擊 label 元素內的文本時，它可以切換單選按鈕或復選框。
我們來演示一下。
打開編輯器，新建一個 label.html 文件，自動補全基礎代碼，在body標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本請輸入用戶名： (冒號讀出來) ，緊接著添加一個 input 標簽，type 屬性的值為 text。用 lable 標簽把 "請輸入用戶名" 包裹起來，保存。
在瀏覽器中打開頁面，點擊文本，輸入框控件并沒有出現光標，哪里出現了問題？
原來，單純的使用 label 標簽還不夠，需要為 label 標簽添加 for 屬性，作用就是用來定義與 label 關聯的表單控件，它的值為表單控件的 id 屬性值。
這里需要注意，id 屬性值具有唯一性，一個頁面中不能出現兩個相同的 id 屬性值。
返回編輯器中，我們給 input 輸入框定義 id 屬性，值設置為 username，再為 label 添加 for 屬性，它的值要設置為輸入框 id 屬性的值： username。保存頁面。
返回瀏覽器，刷新，再次點擊文本，輸入框獲得了焦點，效果實現了。
繼續回到"流調信息表"案例，在手機號輸入框中，默認已經填入了手機號碼，現在我們試圖更改它，卻發現無法修改，這個控件是只讀的。
只讀輸入框控件雖然內容不能被輸入和修改，卻可以復制控件里面原有的文本 (這里有操作，錄音時可以慢點)。
在提交表單時，只讀控件的值可以被收集并發送給后端，這個特點我們將來再介紹。另外，textarea 多行輸入框控件也可以設置成只讀的。
如何實現這個效果呢？
其實很簡單，給控件定義一個 readonly 只讀屬性就可以實現了。
回到編輯器，我們改一下文件名，添加單詞 readonly。
繼續在原文檔里編寫代碼。在輸入框后面添加一個 br 標簽，書寫文本 "您的手機號:" ，并在文本后面添加 input 標簽，type 的取值設置 為text。
為了在瀏覽器中默認顯示一個手機號碼，需要為它定義一個 value 屬性，value 的含義是值的意思，作用是給輸入框一個默認值，可以在瀏覽器中顯示給用戶。
最后再定義一個 readonly 屬性。
回到瀏覽器，刷新。此時試圖修改手機號，是修改不了的。
再次回到"流調信息表"案例，在性別選擇時，性別保密單選控件是灰色的，使用鼠標點擊不能選中它。
這種效果是如何實現的呢?
實現這個效果，我們需要給表單控件添加一個 disabled 屬性。disabled 是禁用的意思。一個禁用的表單控件是不可用和不可點擊的。
當提交表單時，禁用的表單控件值是不會被收集和發送給后端的。disabled 屬性可以添加給任何的表單控件。
回到編輯器，我們再改一下文件名，添加單詞 disabled。
繼續在原文檔里編寫代碼。再添加一個 br 標簽，書寫文本"選擇性別"，使用 emmet 語法 input，中括號，type 等于 radio，空格，name 等于 gender，乘以3，按下 tab 鍵補全代碼，(input[type=radio name=gender]*3) 在 input 后面分別添加男、女、保密。給最后一個控件再定義一個 disabled 屬性。保存。
回到瀏覽器，刷新，一組單選框就做好了。性別的男、女可以點選，保密控件被禁用了，灰色顯示，點擊也不能被選中。
lable 標簽以及表單控件的只讀禁用設置就講完了，大家自己動手實現一下吧！
文章配套視頻「鏈接」
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
