我在阅读 MDN 时发现了三个输入元素属性

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

最近我在浏览推特时偶然看到Dan Abramov 的一条推文。他分享了一小段代码，引起了我的注意。这段代码包含一些 JavaScript 代码，可以访问 DOM（文档对象模型）中的一个输入元素，并读取或更改其某些属性。让我感到兴奋和惊讶的是其中的一个属性defaultValue。

我立即打开 MDN 阅读有关此属性的更多信息HTTMLInputElements，并偶然发现了一些我之前不知道的其他属性，这促使我写了这篇简短的文章。

好，我们开始吧！

defaultValue

这是 Dan 的推文示例——让我们快速看一下，假设你有一些 HTML，并且查询一个具有value属性（属性是在 HTML 中定义的，而属性属于 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，你仍然可以使用 `value` 属性访问“初始值” defaultValue（复选框defaultChecked也支持此功能）。真棒！

MDN对“is”的定义defaultValue如下：

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

如果你喜欢，可以在CodePen中尝试修改代码。

indeterminate

这个indeterminate属性非常有趣。你知道复选框除了选中和未选中之外，还可以有其他视觉状态吗？indeterminate这是一个属性（没有对应的特性），你可以用它来给复选框添加一个你可能偶尔见过的短横线。

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在于，你可以将其设置为truetrue 或 false false，这将影响复选框的伪类，但不会影响单选按钮。对于单选按钮，组的实际选择状态始终是正确的。

顺便提一下，为了完成进度元素，:indeterminate即使它们没有定义属性，它们也会匹配选择器value。

MDN对“is”的定义indeterminate如下：

[它]表示复选框或单选按钮没有值，处于不确定状态。复选框的外观会改变，使其类似于第三种状态。这不会影响选中属性的值，单击复选框会将该值设置为 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，用鼠标或触控板选择内容时返回的是数字，而forward用backwardSHIFT 键和方向键或 Control 键选择文本时返回的是数字。

如果你喜欢，可以在CodePen中尝试修改代码。

就这样。:)

快速（且简短）的结论

MDN 真是一个神奇的资源。即使我已经用了input八年 MDN 的 Elements，仍然总能发现新的东西，而这正是我热爱 Web 开发的原因。我个人会定期阅读一些 MDN 的文章（我设置了一个 Slack 机器人，每天都会提醒我打开bit.ly/randommdn），因为总能从中有所收获，我强烈推荐大家也这样做！

感谢阅读！❤️