javascript基础从小白到高手系列一百六十七：文本框编程

在HTML 中有两种表示文本框的方式：单行使用元素，多行使用元素。这两
个控件非常相似，大多数时候行为也一样。不过，它们也有非常重要的区别。
默认情况下，元素显示为文本框，省略type 属性会以"text"作为默认值。然后可以通过size 属性指定文本框的宽度，这个宽度是以字符数来计量的。而value 属性用于指定文本框的初始值，
maxLength 属性用于指定文本框允许的最多字符数。因此要创建一个一次可显示25 个字符，但最多允
许显示50 个字符的文本框，可以这样写：

元素总是会创建多行文本框。可以使用rows 属性指定这个文本框的高度，以字符数 计量；以cols 属性指定以字符数计量的文本框宽度，类似于元素的size 属性。与 不同的是，的初始值必须包含在和之间，如下所示： initial value

同样与元素不同的是，不能在HTML 中指定最大允许的字符数。
除了标记中的不同，这两种类型的文本框都会在value 属性中保存自己的内容。通过这个属性，
可以读取也可以设置文本模式的值，如下所示：
let textbox = document.forms[0].elements[“textbox1”];
console.log(textbox.value);
textbox.value = “Some new value”;
应该使用value 属性，而不是标准DOM方法读写文本框的值。比如，不要使用setAttribute()
设置元素value 属性的值，也不要尝试修改元素的第一个子节点。对value 属
性的修改也不会总体现在DOM中，因此在处理文本框值的时候最好不要使用DOM 方法。
选择文本
两种文本框都支持一个名为select()的方法，此方法用于全部选中文本框中的文本。大多数浏览
器会在调用select()方法后自动将焦点设置到文本框（Opera 例外）。这个方法不接收参数，可以在任
何时候调用。下面来看一个例子：
let textbox = document.forms[0].elements[“textbox1”];
textbox.select();
在文本框获得焦点时选中所有文本是非常常见的，特别是在文本框有默认值的情况下。这样做的出
发点是让用户能够一次性删除所有默认内容。可以通过以下代码来实现：
textbox.addEventListener(“focus”, (event) => {
event.target.select();
});
把以上代码应用到文本框之后，只要文本框一获得焦点就会自动选中其中的所有文本。这样可以极
大提升表单易用性。
select 事件
与select()方法相对，还有一个select 事件。当选中文本框中的文本时，会触发select 事件。
这个事件确切的触发时机因浏览器而异。在IE9+、Opera、Firefox、Chrome 和Safari 中，select 事件
会在用户选择完文本后立即触发；在IE8 及更早版本中，则会在第一个字符被选中时触发。另外，调用
select()方法也会触发select 事件。下面来看一个例子：
let textbox = document.forms[0].elements[“textbox1”];
textbox.addEventListener(“select”, (event) => {
console.log(Text selected: ${textbox.value});
});