javascript基础学习系列四百七十九：文本框编程

在 HTML 中有两种表示文本框的方式:单行使用元素，多行使用元素。这两 个控件非常相似，大多数时候行为也一样。不过，它们也有非常重要的区别。
默认情况下，元素显示为文本框，省略 type 属性会以"text"作为默认值。然后可以通过 图灵社区会员 eraylee(eraylee@live.com) 专享 尊重版权

表单脚本

size 属性指定文本框的宽度，这个宽度是以字符数来计量的。而 value 属性用于指定文本框的初始值， maxLength 属性用于指定文本框允许的最多字符数。因此要创建一个一次可显示 25 个字符，但最多允 许显示 50 个字符的文本框，可以这样写:

<input type="text" size="25" maxlength="50" value="initial value">

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

<textarea rows="25" cols="5">initial value</textarea>

同样与元素不同的是，不能在 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}`);
});

2. 取得选中文本

虽然 select 事件能够表明有文本被选中，但不能提供选中了哪些文本的信息。HTML5 对此进行了扩 16 展，以方便更好地获取选中的文本。扩展为文本框添加了两个属性:selectionStart 和 selectionEnd。 这两个属性包含基于 0 的数值，分别表示文本选区的起点和终点(文本选区起点的偏移量和文本选区终 点的偏移量)。因此，要取得文本框中选中的文本，可以使用以下代码:

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
                                     textbox.selectionEnd);
}

因为 substring()方法是基于字符串偏移量的，所以直接传入 selectionStart 和 selectionEnd 就可以取得选中的文本。

这个扩展在 IE9+、Firefox、Safari、Chrome 和 Opera 中都可以使用。IE8 及更早版本不支持这两个 属性，因此需要使用其他方式。
老版本 IE 中有一个包含整个文档中文本选择信息的 document.selection 对象。这意味着无法确 定选中的文本在页面中的什么位置。不过，在与 select 事件一起使用时，可以确定是触发这个事件文 本框中选中的文本。为取得这些选中的文本，必须先创建一个范围，然后再从中提取文本，如下所示:

 function getSelectedText(textbox){
 return document.selection.createRange().text; 22
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
} else if (document.selection){
}
}

这个修改后的函数兼容在 IE 老版本中取得选中文本。注意 document.selection 是根本不需要
textbox 参数的。

3. 部分选中文本

textbox.value = "Hello world!" 25 // 选择所有文本

HTML5 也为在文本框中选择部分文本提供了额外支持。现在，除了 select()方法之外，Firefox 最早实现的 setSelectionRange()方法也可以在所有文本框中使用。这个方法接收两个参数:要选择 的第一个字符的索引和停止选择的字符的索引(与字符串的 substring()方法一样)。下面是几个例子:

textbox.setSelectionRange(0, textbox.value.length); // "Hello world!" // 选择前3个字符
 textbox.setSelectionRange(0, 3);
// 选择第 4~6 个字符 textbox.setSelectionRange(4, 7);
// "Hel"
 // "o w"

如果想看到选择，则必须在调用 setSelectionRange()之前或之后给文本框设置焦点。这个方法
在 IE9、Firefox、Safari、Chrome 和 Opera 中都可以使用。