摘要:屬性可以設置文本框的初始值。特性則是用于指定文本框內可以接受的最大字符數。與這個方法對應的事件,在選擇了文本框中的文本時事件觸發。如阻止用戶選擇要調用之前或之后立即將焦點設置到文本框。
在HTML中,有兩種方式來表現文本框:
一種是使用input元素的單行文本,另一種是使用textarea的多行文本框。
使用input方式,必須添加type,設置為“text”。
size特性,可以指定文本框內能夠顯示的字符數。
value屬性可以設置文本框的初始值。
maxlength特性則是用于指定文本框內可以接受的最大字符數。
textarea的初始值則必須放在開始和結束標簽之內。
cols是文本框字符行數;
rows是文本框字符列數;
另外,不能在HTML中給textarea指定最大字符數;
選擇文本上述兩種文本框都支持
select()方法,這個方法主要用于選擇文本框中的所有文本。不接受任何參數。
與這個方法對應的select事件,在選擇了文本框中的文本時事件觸發。
select()方法下面的代碼是只要文本框獲得焦點,就會選擇全部的文本:
var textBox = document.getElementById("myForm").elements["firstName"]; //設置默認值 textBox.value = "input your firstName"; //設置事件 textBox.addEventListener("focus", function () { event.target.select(); });select事件
何時觸發該事件:
一般情況下只有用戶選擇了文本(而且要釋放鼠標),才會觸發select事件;
IE8及更早版本中,只要用戶選擇了一個字母(不必釋放鼠標),就會觸發select事件;
在調用select()方法時也會觸發;
如:
var textBox = document.getElementById("myForm").elements["firstName"]; //設置默認值 textBox.value = "input your firstName"; //設置事件 textBox.addEventListener("select", function () { console.log("selected"); });取得選擇的文本
利用兩個屬性:
selectionStart
selectionEnd
這兩個屬性保存的是基于0的數值,表示所選擇文本的范圍(偏移量)。因此要取得用戶選擇的文本框中的文本,可以使用如下代碼:
var textBox = document.getElementById("myForm").elements["firstName"]; //設置默認值 textBox.value = "input your firstName"; //設置事件 textBox.addEventListener("select", function () { var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd); console.log(selected); });
另外,也可以用該屬性來設置當獲得焦點的時候默認全選的狀態:
textBox.addEventListener("focus", function () { textBox.selectionStart = "0"; textBox.selectionEnd = textBox.value.length; });
或者:
textBox.addEventListener("focus", function () { textBox.blur(); });
但是,使用selectionStart/End屬性時,IE8不支持,但支持另一個名為
document.selection對象,該對象保存著用戶在整個文檔范圍內選擇的文本信息
獲取選擇的文本的兼容版本為:
function getSelectedText (textbox) { if (typeof textbox.selectionStart == "number") { return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); }else if (document.selection) { return document.selection.createRange().text; } }選擇部分文本
選擇部分文本的方法是:
setSelectionRange()方法。接收兩個參數:要選擇第一個字符的索引和最后一個字符的索引。
如阻止用戶選擇:
textBox.addEventListener("focus", function () { textBox.setSelectionRange(0,0); }); textBox.addEventListener("select", function () { textBox.setSelectionRange(0,0); });
要調用setSelectionRange()之前或之后立即將焦點設置到文本框。而IE中使用的方式是適用范圍來解決文本的問題:
var range = textBox.createTextRange(); range.collapse(true); //范圍折疊到開頭 range.moveStart("Character",0); range.moveEnd("Character",textBox.value.length); range.select();
兼容版本:比較常用
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); range.select(); }; }過濾輸入 屏蔽字符
下面的代碼僅允許輸入數字:
var textBox = document.getElementById("myForm").elements["firstName"]; textBox.autofocus = true; textBox.addEventListener("keypress", function () { if (!/d/.test(String.fromCharCode(event.charCode))) { //僅輸入數字 event.preventDefault(); }; });
但是部分瀏覽器會對向上、下鍵、退格鍵觸發keypress事件,所以需要對這些常用的操作鍵取消禁止,只要不屏蔽那些字符編碼小于10的鍵即可:
textBox.addEventListener("keypress", function () { if (!/d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { //僅輸入數字 event.preventDefault(); }; });操作剪貼板
以下是6個剪貼板事件
beforecopy:在發生復制操作前觸發
copy:在發生復制時觸發
beforecut:在發生剪貼前操作
cut:在發生加貼時操作
beforepaste:在發生黏貼操作前觸發
paste:在發生黏貼操作時觸發
如設置禁止拷貝:
//拷貝之前提示禁止拷貝 textBox.addEventListener("beforecopy", function() { textBox.value = "do not copy"; }); //拷貝時禁止拷貝 textBox.addEventListener("copy", function() { event.preventDefault(); });
要訪問剪貼板中的數據,可以使用clipboardData對象,在IE中,這個對象是window對象的屬性,在friefox,safari和chrome,這個對象是相應event對象的屬性;在IE中可以隨時訪問該對象;但在其他瀏覽器中只有在處理剪貼板事件期間才有效。
這個clipboardData對象有三個方法:
getData()
setData()
clearData()
getData()接收一個參數,即要取得數據的格式(IE中有兩種數據格式:text和URL;在其他瀏覽器中這個參數是一種MIME類型;不過可以用text代替text/plain)。
setData()接收兩個參數,即數據類型和要放在剪貼板中的文本。(第一個參數中,IE支持text和URL;第二個參數中chrome和safari不支持text類型);這兩個瀏覽器在成功將文本放到剪貼板中后,都會返回true;否則,返回false:
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); } }
目前瀏覽器逐漸收緊對訪問剪貼板的操作。
自動切換焦點理論上就是在前一個文本框中的字符打到最大數量后,自動將焦點切換到下一個文本框:
DOM:
js:
var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); textbox1.addEventListener("keyup", tabForward); textbox2.addEventListener("keyup", tabForward); textbox3.addEventListener("keyup", tabForward); function tabForward() { var target = event.target; //當value長度等于最大值的時候 if (target.value.length == target.maxLength) { var form = target.form; //遍歷所在的form表單中的元素 for (var i = 0, len = form.elements.length; i < len; i++) { //如果該元素是目標元素 if (form.elements[i] == target) { //并且該元素的下一個元素為true 其他條件 if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) { //則下個元素獲得焦點 form.elements[i + 1].focus(); } } }; } }HTML5約束驗證API 必填字段required屬性
在必填字段中添加屬性required。它適用于input,textarea,select字段。使用下面的代碼可以檢測瀏覽器是否支持required屬性:
var isRequiredSupported="required" in document.createElement("input");其他輸入類型
input的type屬性增加了“email”和“url”;各瀏覽器也都為它們增加了定制的驗證機制:
var input = document.createElement("input"); input.type = "email"; var isEmailSupported = (input.type == "email");數值范圍
除了“email”和“URL”,HTML5還定義了另外幾個輸入元素。這幾個元素都要求填寫基于數字的值:“number”,“range”,“datetime”,“datetime-local”,“date”,“mouth”,“week”,“time”。目前瀏覽器對這些類型支持并不好,如果真想使用的話要小心。
對這事數值類型的輸入元素可以指定min屬性,max屬性,step屬性。同時這些數值類型元素還有兩個方法:stepUp(),stepDown()。都接受一個參數,要在當前基礎上加上或減去的數值。
DOM:
js:
var input = document.getElementById("txtTel4"); var up = document.getElementById("up"); input.addEventListener("mousemove", function () { var output = document.getElementById("output"); output.value = input.value; }); up.addEventListener("click", function () { //點擊value值以2為單位增加 input.stepUp(2); var output = document.getElementById("output"); output.value = input.value; });輸入模式
HTML5新增了pattern屬性,這個屬性的值是一個正則表達式,用于匹配文本框中的值。
var num = document.getElementById("number"); console.log(num.pattern); //d{3}
可以使用以下代碼來檢測瀏覽器是否支持pattern屬性:
var isPatternSupported="pattern" in document.createElement("input");檢測有效性
使用checkValidity()方法可以檢測表單中的字段是否有效。所有表單的字段都有這個方法,如果檢查有效返回true。
var form = document.forms[0]; var name = document.getElementById("name"); var number = document.getElementById("num"); var check = document.getElementById("check"); var submit = document.getElementById("submit"); check.addEventListener("click", function () { console.log(form.checkValidity()); //檢測整個表單是否正確 if (form.checkValidity()) { submit.removeAttribute("disabled"); check.disabled = true; }else{ alert("請檢查表單"); } });input的validity屬性會給出什么字段有效和無效的具體信息。
var inputName = document.getElementById("inputName"); inputName.onblur = function() { if (inputName.checkValidity()) { inputName.style.color = "white"; inputName.style.backgroundColor = "green"; } else { inputName.style.color = "white"; inputName.style.backgroundColor = "red"; if (inputName.validity.patternMismatch) { inputName.value = "請填寫正確的格式"; } } }; inputName.addEventListener("mouseenter", function () { inputName.focus(); inputName.select(); });
validity主要包括下列屬性:
customError:是否設置了setCustomValidity();
patternMismatch:是否與pattern屬性匹配;
rangeOverflow:是否比max值大;
rangeUnderflow:是否比min值小;
stepMisMatch:步長是否合理;
tooLong:是否超過了maxlength;
typeMismatch:是否不是mail類型和url類型;
valid:如果這里的其他屬性都是false,返回true;
valueMissing:如果為required中沒有值,返回true。
禁用驗證通過設置表單的novalidate屬性,可以是表單不進行驗證。用js獲取form之后,設置它的novalidate屬性為true,會禁用表單驗證。
在提交按鈕上添加formnovalidate屬性,會不驗證提交表單。用js獲取submit按鈕之后,設置它的formnovalidata屬性為true,會禁用表單驗證并提交。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78525.html
表單腳本 表單的基礎知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset,服務器能夠處理的字符集,等價于HTML中的accept-charset特性 action,接受請求的URL,等價于HTML中的action特性 elements,表單中所有控件的集合 enctype,請求的編碼類型,等價于HTML中的enctype特性 length,表單中控件的數量 m...
摘要:布爾值,表示當前字段是否被禁用。指向當前字段所屬表單的指針只讀。文本框腳本在中,有兩種方式來表現文本框一種是使用元素的單行文本框,另一種是使用的多行文本框。然后,我們把這個函數指定為每個文本框的事件處理程序。 本章知識架構 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...
摘要:瀏覽器如何將數據發送給服務器對表單字段的名稱和值進行編碼,使用和號分隔不發送禁用的表單字段只發送勾選的復選框和單選按鈕不發送為和的按鈕多選框中每個選中的值單獨一個條目在單擊提交按鈕提交表單的情況下,也會發送提交按鈕。否則不發送提交按鈕。 瀏覽器如何將數據發送給服務器: 對表單字段的名稱和值進行URL編碼,使用和號(&)分隔 不發送禁用的表單字段 只發送勾選的復選框和單選按鈕 不發送t...
摘要:處理表格和提交等等重置表單重置表單應該使用或當用戶單擊重置按鈕重置表單時,會觸發事件,可以在必要的時候取消重置操作另外也可以通過腳本調用方法重置表單,在調用方法重置表單時會觸發事件。在中,表單中新增加了屬性,自動把焦點移動到相應字段。 HTMLFormElement繼承了HTMLElement,它自己獨有的屬性和方法有: acceptCharset:服務器能夠處理的字符集,等價于HT...
閱讀 2637·2023-04-26 02:17
閱讀 1610·2021-11-24 09:39
閱讀 1070·2021-11-18 13:13
閱讀 2598·2021-09-02 15:11
閱讀 2770·2019-08-30 15:48
閱讀 3406·2019-08-30 14:00
閱讀 2431·2019-08-29 13:43
閱讀 658·2019-08-29 13:07