在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:

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:

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属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。
var num = document.getelementbyid(number);console.log(num.pattern); //\d{3}
可以使用以下代码来检测浏览器是否支持pattern属性：
var ispatternsupported=pattern in document.createelement(input);
4、检测有效性
使用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。5、禁用验证
通过设置表单的novalidate属性，可以是表单不进行验证。用js获取form之后，设置它的novalidate属性为true，会禁用表单验证。
在提交按钮上添加formnovalidate属性，会不验证提交表单。用js获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。
以上就是本文的全部内容，希望对大家的学习有所帮助。