作者：Stefan Judis
最近我正在阅读推特并偶然发现了一篇Dan Abramov的推文。他分享的代码片段引起了我的注意。主要是从DOM（文档对象模型）访问input元素并读取或更改其某些属性的JavaScript代码。令我兴奋和惊讶的是defaultValue属性。

我立刻打开MDN看了下关于HTMLInputElements的属性，并且偶然发现了一些我之前从未注意的属性，这致使我写了这篇文章。

现在开始！

defaultValue

这是一个Dan Abramov推文中的例子。让我们快速浏览并假设这段HTML代码中有一个input元素，该元素定义了一个value特性（特性在HTML中定义，属性属于JavaScript对象）。

1	<input type="text" value="Hello world">

现在用JavaScript来控制这个元素。

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）来访问“初始值” 。这非常酷！

MDN如下定义defaultValue

返回默认值即在HTML中创建这个对象时的最初特性

indeterminate

indeterminate是属性中最令人着迷的一个。你是否知道复选框具有除了checked与unchecked之外的可视外观。indeterminate就是一个能将小破折号放入时常看到的复选框中的属性（HTML无此特性）。

1 2	const input = document.querySelector('input'); input.indeterminate = true;

将indeterminate设置为true对复选框的值没有任何影响，并且唯一我能想到的合理运用便是如同Chris Coyier在CSSTricks上描述的嵌套复选框。

indeterminate不仅用于复选框。还可以用在单选按钮和进度条元素。在一组没有单选按钮被选中的按钮组中，当单选按钮组中没有预先selected的元素时——所有的单选按钮都处于indeterminate状态。

很酷的是，你也可以使用CSS伪类:indeterminate来选择元素，当按钮组中没有单选按钮被选中时，这些元素可以很方便的显示特定的UI组件。

.msg {
    display: none;
}

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

indeterminate属性的有趣之处在于你可以将其设置为true或者false这将只影响复选框的伪类，且不会影响单选框。而在处理单选按钮时，按钮组的实际选择状态始终是不变的。

并且当进度条元素没有定义value特性时也可以匹配这些选择器，包括:indeterminate。

MDN如下定义indeterminate

表示复选框或单选按钮没有值且处于不确定状态。复选框的外观将更改为第三状态。并且不会影响checked特性的值，单击复选框则会将值设置为false。

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返回的数字描述了我所选文本位置。当使用鼠标或触控板选择内容，或者使用SHIFT加箭头或CTRL选择文本时，selectionDirection会令人惊讶地返回none、forward或者backward。

就是这样。:)

快速（简短）的结论：

MDN是一个奇妙的资源。即使在使用input元素八年后，依旧会有新的发现，这就是我为什么喜欢Web开发的原因。就个人而言，我坚持定期阅读随机的MDN文章，因为总会发现一些新东西，对此我强烈推荐！

谢谢阅读！❤️

原文地址：Three Input element properties that I discovered while reading MDN