[译] 我在阅读 MDN 时发现的 3 个 Input 元素属性

• 原文地址：Three Input element properties that I discovered while reading MDN
• 原文做者：Stefan Judis
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：ssshooter
• 校对者：GpingFeng Park-ma

我最近在 Twitter 偶然发现了 Dan Abramov 的推文。他分享的一段简短的代码引发了我注意的。这段代码使用 JavaScript 访问 DOM（Document Object Model）中的 input 元素，并读取或更改了它的一些属性，其中令我惊叹的是 defaultValue 属性。

我当即打开 MDN 阅读更多关于 HTTMLInputElement 的 defaultValue 属性，并偶然发现了一些我不知道的属性，这即是我写这篇短文的缘由。

那么咱们开始吧！

defaultValue

这是 Dan 推文中的示例 — HTML 代码中有一个 input 元素，该元素具备 value 属性（attribute）（attribute 在 HTML 代码中定义，而 property 属于 JavaScript 对象）。

<input type="text" value="Hello world">
复制代码

如今能够查找到这个元素并作一些处理。

const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'
复制代码

如你所见，属性 value 中定义的值最初反映在元素属性 value 中，这没什么特别，但当你改变 value 时，仍然可使用 defaultValue 访问“初始值”（defaultChecked 在复选框也可用），这就很酷了！

defaultValue 在 MDN 的定义以下：

[它]返回 / 设置在建立此对象的 HTML 中最初指定的默认值。

你能够在 CodePen 测试这段代码。

indeterminate

indeterminate 属性是一个迷人的属性。你可曾知道复选框具备已选和未选以外的其余可视状态？indeterminate 是一个 property（没有对应的 attribute），你有时候可能会看到带着一个小破折号的复选框，使用这个属性便能作到。

const input = document.querySelector('input');
input.indeterminate = true;
复制代码

将 indeterminate 设置为 true 对复选框的值没有任何影响，我想到的惟一应用场景是 Chris Coyier 在 CSSTricks 提到的 嵌套复选框。

indeterminate 不只适用于复选框，还能够用于单选按钮和进度元素。假设有一组单选按钮，没有一个按钮被选择。在你未做出选择前，它们都没有被选中同时也都没有不被选中，这时它们就处于 indeterminate 状态。

还有一种玩法，你能够对被选定元素使用 CSS 伪类 :indeterminate，这样能够在单选按钮组未被选择时方便展现一些特殊的 UI 组件。

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}
复制代码

有关 indeterminate 属性的有趣之处在于你能够将它设置为 true 或 false，这将影响复选框的伪类，但不会影响单选按钮。对于单选按钮，按钮组的实际选择状态始终是正确的。

顺道提一下，progress 元素 在未定义 value 属性时也将匹配 :indeterminate 选择器。

indeterminate 在 MDN 的定义以下：

[它]表示复选框或单选按钮没有值且处于不肯定的状态。复选框的外观会变成第三个状态，但这不影响 checked 属性的值，单击复选框会将值设置为 false。

你能够在 CodePen 测试这段代码。

selectionStart、selectionEnd 和 selectionDirection

这三个属性能够肯定用户选择的内容，而且使用起来很是简单。若是用户在输入字段中选择文本，则可使用这三个属性计算所选内容。

const input = document.querySelector('input');

setInterval( _ => {
  console.log(
    input.selectionStart,
    input.selectionEnd,
    input.selectionDirection;
  ); // e.g. 2, 5, "forward"
}, 1000)
复制代码

这段测试代码的做用是每秒记录一次选择值。selectionStart 和 selectionEnd 返回描述我选择位置的索引，可是当你使用鼠标或触控板选择时 selectionDirection 返回的是 none，而使用 SHIFT 和箭头选择文本时会返回 forward 或 backward。

你能够在 CodePen 测试这段代码。

以上是此次分享的所有内容。 :)

快速简单的总结

MDN 是一种奇妙的网站。即便在我使用了 input 元素的八年以后，仍能发现新玩法，这就是我喜欢的 Web 开发的缘由。我之后会按期随机阅读 MDN 的文章（我有一个平常 Slack-bot，提醒我打开 bit.ly/randommdn），由于学无止境！我强烈推荐 MDN！

感谢阅读！ ❤️

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。