一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。

使用input方式，必须添加type，设置为“text”。

textarea的初始值则必须放在开始和结束标签之内。

另外，不能在HTML中给textarea指定最大字符数；

一、选择文本

上述两种文本框都支持

1、select()方法

下面的代码是只要文本框获得焦点，就会选择全部的文本：

2、select事件

何时触发该事件：

如：

3、取得选择的文本

利用两个属性：

这两个属性保存的是基于0的数值，表示所选择文本的范围（偏移量）。因此要取得用户选择的文本框中的文本，可以使用如下代码：

另外，也可以用该属性来设置当获得焦点的时候默认全选的状态：

或者：

但是，使用selectionStart/End属性时，IE8不支持，但支持另一个名为

获取选择的文本的兼容版本为：

二、选择部分文本

选择部分文本的方法是:

setSelectionRange()方法。接收两个参数：要选择第一个字符的索引和最后一个字符的索引。
如阻止用户选择：

要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题：

兼容版本：比较常用

三、过滤输入

1、屏蔽字符

下面的代码仅允许输入数字：

但是部分浏览器会对向上、下键、退格键触发keypress事件，所以需要对这些常用的操作键取消禁止，只要不屏蔽那些字符编码小于10的键即可：

四、操作剪贴板

以下是6个剪贴板事件

如设置禁止拷贝：

要访问剪贴板中的数据，可以使用clipboardData对象，在IE中，这个对象是window对象的属性，在friefox，safari和chrome，这个对象是相应event对象的属性；在IE中可以随时访问该对象；但在其他浏览器中只有在处理剪贴板事件期间才有效。

这个clipboardData对象有三个方法：

getData()接收一个参数，即要取得数据的格式（IE中有两种数据格式：text和URL；在其他浏览器中这个参数是一种MIME类型；不过可以用text代替text/plain）。

setData()接收两个参数，即数据类型和要放在剪贴板中的文本。（第一个参数中，IE支持text和URL；第二个参数中chrome和safari不支持text类型）;这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回false：

目前浏览器逐渐收紧对访问剪贴板的操作。

五、自动切换焦点

理论上就是在前一个文本框中的字符打到最大数量后，自动将焦点切换到下一个文本框：

DOM:

js:

六、HTML5约束验证API

1、必填字段required属性

在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性：

2、其他输入类型

input的type属性增加了“email”和“url”；各浏览器也都为它们增加了定制的验证机制：

3、数值范围

除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。

对这事数值类型的输入元素可以指定min属性，max属性，step属性。同时这些数值类型元素还有两个方法：stepUp(),stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。

DOM:

js:

3、输入模式

HTML5新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。

可以使用以下代码来检测浏览器是否支持pattern属性：

4、检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。

input的validity属性会给出什么字段有效和无效的具体信息。

validity主要包括下列属性：

5、禁用验证

通过设置表单的novalidate属性，可以是表单不进行验证。用js获取form之后，设置它的novalidate属性为true，会禁用表单验证。

在提交按钮上添加formnovalidate属性，会不验证提交表单。用js获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。