文本字段

由type属性为text或password的<input>标签和textarea标签组成的字段有相同的接口。其 DOM 元素都有一个value属性，保存了为字符串格式的当前内容。将这个属性更改为另一个值将改变字段的内容。

文本字段selectionStart和selectEnd属性包含光标和所选文字的信息。当没有选中文字时，这两个属性的值相同，表明当前光标的信息。例如，0 表示文本的开始，10 表示光标在第十个字符之后。当一部分字段被选中时，这两个属性值会不同，表明选中文字开始位置和结束位置。

和正常的值一样，这些属性也可以被更改。

想象你正在编写关于 Knaseknemwy 的文章，但是名字拼写有一些问题，后续代码将<textarea>标签和一个事件处理器关联起来，当点击F2时，插入 Knaseknemwy。

<textarea></textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", event => {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    let from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = from + word.length;
    field.selectionEnd = from + word.length;
  }
</script>

replaceSelection函数用给定的字符串替换当前选中的文本字段内容，并将光标移动到替换内容后让用户可以继续输入。change事件不会在每次有输入时都被调用，而是在内容在改变并失焦后触发。为了及时的响应文本字段的改变，则需要为input事件注册一个处理器，每当用户有输入或更改时就被触发。

下面的例子展示一个文本字段和一个展示字段中的文字的当前长度的计数器。

<input type="text"> length: <span id="length">0</span>
<script>
  let text = document.querySelector("input");
  let output = document.querySelector("#length");
  text.addEventListener("input", () => {
    output.textContent = text.value.length;
  });
</script>