[翻译] 我在阅读 MDN 的时候发现的三个 input 的属性

Question

[翻译] 我在阅读 MDN 的时候发现的三个 input 的属性

Opened this issue 6 years ago · 0 comments

最近我在浏览 T�witter 的过程中偶然看到了 Dan Abranmov 的一条推特。他分享的一个代码片段引起了我的注意。代码里用 JavaScript 获取了 DOM 的 input 元素，并读取或改变它的一些属性，其中最让我激动和好奇的是 defaultValue 属性。

我立即打开 MDN 去阅读更多关于 HTMLInputElements 的这个属性然后又偶然发现更多我之前没有注意到的属性，从而促使我写下了这篇小文章。

那就让我们一起去看看吧！

作者：Stefan Judis

原文链接：https://dev.to/stefanjudis/three-input-element-properties-that-i-discovered-while-reading-mdn-30fg

defaultValue

这是 Dan 的推特的例子 -- 我们来快速了解一下。假定你已经有一些 HTML，然后我们获取一个 input 元素，这个元素有一个 value 属性（特性(attributes)是指定义在 HTML 中然而它的属性(properties)属于 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'

你可以看到 HTML 中 value 属性已经初始化并且映射到元素的 value 属性。这个我完全理解。现在当你改变 value, 你仍然能通过 defautlValue 获取 “初始值”(checkbox 可以使用 defaultChecked)。这相当酷！

以下是 MDN 对 defaultValue 的定义：

在 HTML 创建对象的时候返回/设置默认值作为初始化声明。

如果喜欢你可以在 CodePen 上试试。

indeterminate

indeterminate 也是一个很棒的属性(property)。你知道 checkbox 除了被选中和非被选中外还有另外的一个视觉上的状态吗？indeterminate 是一个属性（property）（没有与之对应的特性（attribute））。你可以在 checkbox 中显示一个你时常看到的小横杠。

const input = document.querySelector('input')
input.indeterminate = true

将 indeterminate �设为 true 并不会对 checkbox 的值产生什么影响，它的唯一合理的用处应该是当我们嵌套 checkbox 的时候，比如��像 Chris Coyier describes on CSSTricks。

indeterminate 并不只是在 checkbox 上有用，它也可以用于 radio 按钮或者 progress 元素。我们来一组 radio 按钮，这些 radio 都没有被选中。当你没有预先选择单选框组的任一元素，没有元素被选中过，也没有被取消选中的 - 所以它们都是 indeterminate 状态。

比较酷的是，你还可以用 css 伪类选择器 :indeterminate 来选择元素，来方便地展示当 radio 没有被选中时的一些特别的 UI 组件。

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}

关于 indeterminate 属性比较有意思的一点是，你将其�设为 true 或 false ，这会影响到 checkbox 的伪类，但不会影响到 radio 的。处理 radio 的实际选中状态永远是对的。

顺便说下，已经处完成状态的 progress，并且没有定义 �value 特性（attribute）元素也会匹配 :indeterminate 选择器。

以下是 MDN 对 indeterminate 的定义：

[它]代表 checkbox 或者 radio 按钮没有值（value）,处于 indetermiate 状态。checkbox 会改变其外观为一种��类似于第三种状态。�不会影响到元素的 value 或者 checked 属性。点击 checkbox 会设置其值为 false。

如果�喜欢，你可以在 CodePen 上操作尝试。

selectionStart, selectionEnd 和 selectionDirection

这三个属性可以找出用户的选中部分，我们可以直接使用它们。如果用户在 input 框中选中了一些文本，我们可以用这些属性分析被选中的东西。

const input = document.querySelector('input')

setInterval( _ => {
  console.log(
    input.selectionStart,
    input.selectionEnd,
    input.selectionDirection
  ) // e.g. 2, 5, "forward"
})

我做了一个测试，我定义了一个每秒循环打印选中值的定时器，selectionStart 和 selectionEnd会返回我所选中的内容的描述位置的数值，但是当你用你的鼠标或者触控板（trackpad）， selectionDirection 出人意料地返回了 none，但是当你用 SHIFT 和箭头或者控制按键去选择文字，它就会返回 forward 或 backward。

如果�喜欢，你可以造 CodePen 上操作尝试。

然后就是这些啦。：）

快速(短)小结

MDN 是一个非常棒的资料来源。甚至在我使用了 input 元素八年后的现在依然有新的东西可以挖掘。这就是我热爱 web 开发的原因。对我个人来说，我经常随机阅读 MDN 上的文章（我有一个日常懒惰机器人（Slack-bot）来提醒我打开 bit.ly/randommdn），因为这上面一定会有东西可以发掘，并且，我高度推荐这个。

谢谢阅读！

译者注

attribute 和 property 的区别

这里文中 attribute 指的是 HTML 中元素的属性，中文译作特性。property 指对象的属性，中文译作属性。