在HTML中有两种表示文本框的方式：单行使用元素，多行使用之间

  1. <textarea cols="5" rows="25">initical value</textarea>

这两种类型的文本框都会在value属性中保存自己的内容。通过这个属性，可读取或设置文本模式的值。

19.2.1 选择文本

两种文本框都支持一个名为select()的方法。
此方法用于全部选中文本框中的文本。
不接收参数，可在任何时候调用。

1．select事件

与select()方法相对，还有一个select事件。当选中文本框中的文本时，会触发select事件。另外，调用select()方法也会触发select事件。

2．取得选中文本

扩展为文本框添加了两个属性：selectionStart和selectionEnd。
这两个属性包含基于0的数值，分别表示文本选区的起点和终点（文本选区起点的偏移量和文本选区终点的偏移量）

3．部分选中文本

setSelectionRange()方法也可在所有文本框中使用。接收两个参数：要选择的第一个字符的索引，和停止选择的字符的索引（与字符串的substring()方法一样）。
部分选中文本对自动完成建议项等高级文本输入框是很有用的。

19.2.2 输入过滤

不同文本框经常需要保证输入特定类型或格式的数据。
或许数据需要包含特定字符或必须匹配某个特定模式。

1．屏蔽字符

有些输入框需要出现或不出现特定字符。
例如，让用户输入手机号的文本框就不应该出现非数字字符。
如果想只屏蔽特定字符，则需要检查事件的charCode属性，以确定正确的回应方式。
例如，下面就是只允许输入数字的代码：

  1. textbox.addEventListener('keypress', (event) => {
  2.   if (!/\d/.test(String.fromCharCode(event.charCode))) {
  3.     event.preventDefault();
  4.   }
  5. });

先用String.fromCharCode()把事件的charCode转换为字符串，再用正则表达式/\d/来测试。这个正则表达式匹配所有数字字符，如果测试失败就调用preventDefault()屏蔽事件默认行为。这样就可以让文本框忽略非数字输入。

2．处理剪贴板

以下是与剪贴板相关的6个事件。
❑ beforecopy：复制操作发生前触发。
❑ copy：复制操作发生时触发。
❑ beforecut：剪切操作发生前触发。
❑ cut：剪切操作发生时触发。
❑ beforepaste：粘贴操作发生前触发。
❑ paste：粘贴操作发生时触发。
剪贴板上的数据可通过window对象（IE）或event对象（Firefox、Safari和Chrome）上的，clipboardData对象来获取。
在Firefox、Safari和Chrome中，为防止未经授权访问剪贴板，只能在剪贴板事件期间访问clipboardData对象；IE则在任何时候都会暴露clipboardData对象。
为了跨浏览器兼容，最好只在剪贴板事件期间使用这个对象。
clipboardData对象上有3个方法：getData()、setData()和clearData()
getData()方法从剪贴板检索字符串数据，并接收一个参数，该参数是要检索的数据的格式。
IE为此规定了两个选项：”text”和”URL”。Firefox、Safari和Chrome则期待MIME类型，不过会将”text”视为等价于”text/plain”。
setData()方法类似，其第一个参数用于指定数据类型，第二个参数是要放到剪贴板上的文本。
同样，IE支持”text”和”URL”, Safari和Chrome则期待MIME类型。
不过，与getData()不同的是，Safari和Chrome不认可”text”类型。只有在IE8及更早版本中调用setData()才有效，其他浏览器会忽略对这个方法的调用。
为抹平差异，可以使用以下跨浏览器的方法：

  1. function getClipboardText(event) {
  2.   var clipboardData = (event.clipboardData || window.clipboardData);
  3.   return clipboardData.getData('text');
  4. }
  5. function setClipboardData(event, value) {
  6.   if (event.clipboardData) {
  7.     return clipboardData.setClipboardData('text/plain', value);
  8.   } else if (window.clipboardData) {
  9.     return clipboardData.setClipboardData('text', value);
  10.   }
  11. }

若文本框期待某些字符或某种格式的文本，那么从剪贴板中读取文本是有帮助的。
比如，如果文本框只允许输入数字，那么就必须检查粘贴过来的值，确保其中只包含数字。
在paste事件中，可以确定剪贴板上的文本是否无效，如果无效就取消默认行为。
如下面的例子所示：

  1. textbox.addEventListener('paste', (event) => {
  2.   let text = getClipboardText(event);
  3.   if (!/^\d*$/.test(text)) {
  4.     event.preventDefault();
  5.   }
  6. });

这个onpaste事件处理程序确保只有数字才能粘贴到文本框中。如果剪贴板中的值不符合指定模式，则取消粘贴操作。

19.2.3 自动切换

JavaScript可通过很多方式来增强表单字段的易用性。最常用的是在当前字段完成时自动切换到下一个字段。

19.2.4 HTML5约束验证API

HTML5为浏览器新增了在提交表单前验证数据的能力。这些能力实现了基本的验证，即使JavaScript不可用或加载失败也没关系。
因为浏览器自身会基于指定的规则进行验证，并在出错时显示适当的错误消息（无须JavaScript）。

1．必填字段

第一个条件是给表单字段添加required属性
任何带有required属性的字段都必须有值，否则无法提交表单。
这个属性适用于、