在HTML中,有两种方式来表现文本框:
一种是使用input元素的单行文本,另一种是使用textarea的多行文本框。
使用input方式,必须添加type,设置为“text”。
size特性,可以指定文本框内能够显示的字符数。 value属性可以设置文本框的初始值。 maxlength特性则是用于指定文本框内可以接受的最大字符数。
textarea的初始值则必须放在开始和结束标签之内。
cols是文本框字符行数;
rows是文本框字符列数;
另外,不能在HTML中给textarea指定最大字符数;
一、选择文本
上述两种文本框都支持
select()方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。 与这个方法对应的select事件,在选择了文本框中的文本时事件触发。
1、select()方法
下面的代码是只要文本框获得焦点,就会选择全部的文本:
var textBox = document.getElementById("myForm").elements["firstName"]; //设置默认值 textBox.value = "input your firstName"; //设置事件 textBox.addEventListener("focus", function () { event.target.select(); });
2、select事件
何时触发该事件:
一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件; IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件; 在调用select()方法时也会触发;
如:
var textBox = document.getElementById("myForm").elements["firstName"]; //设置默认值 textBox.value = "input your firstName"; //设置事件 textBox.addEventListener("select", function () { console.log("selected"); });
3、取得选择的文本
利用两个属性:
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(); }; }
三、过滤输入
1、屏蔽字符
下面的代码仅允许输入数字:
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:
<form action=""> <input type="text" name="tel11" id="txtTel1" maxLength="3"> <input type="text" name="tel12" id="txtTel2" maxLength="3"> <input type="text" name="tel13" id="txtTel3" maxLength="4"> <input type="submit" name="btn" id="btn" value="submit"> </form>
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
1、必填字段required属性
在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性:
var isRequiredSupported="required" in document.createElement("input");
2、其他输入类型
input的type属性增加了“email”和“url”;各浏览器也都为它们增加了定制的验证机制:
var input = document.createElement("input"); input.type = "email"; var isEmailSupported = (input.type == "email");
3、数值范围
除了“email”和“URL”,HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值:“number”,“range”,“datetime”,“datetime-local”,“date”,“mouth”,“week”,“time”。目前浏览器对这些类型支持并不好,如果真想使用的话要小心。
对这事数值类型的输入元素可以指定min属性,max属性,step属性。同时这些数值类型元素还有两个方法:stepUp(),stepDown()。都接受一个参数,要在当前基础上加上或减去的数值。
DOM:
<form action=""> <input type="range" name="tel14" id="txtTel4" required min="10" max="20" step="1"> <input type="button" value="up" id="up"> <input type="text" id="output"> <input type="submit" name="btn" id="btn" value="submit"> </form>
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; });
3、输入模式
HTML5新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值。
<input type="text" id="number" pattern="d{3}"> var num = document.getElementById("number"); console.log(num.pattern); //d{3}
可以使用以下代码来检测浏览器是否支持pattern属性:
var isPatternSupported="pattern" in document.createElement("input");
4、检测有效性
使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法,如果检查有效返回true。
<form action=""> <input type="text" pattern="w" id="name" required> <input type="number" max="10" id="num" required> <input type="button" id="check" value="check"> <input type="submit" id="submit" value="submit" disabled> </form> 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。
5、禁用验证
通过设置表单的novalidate属性,可以是表单不进行验证。用js获取form之后,设置它的novalidate属性为true,会禁用表单验证。
在提交按钮上添加formnovalidate属性,会不验证提交表单。用js获取submit按钮之后,设置它的formnovalidata属性为true,会禁用表单验证并提交。
以上就是本文的全部内容,希望对大家的学习有所帮助。
【JavaScript文本框脚本编写的注意事项】相关文章: