[譯] 我在閱讀 MDN 時發現的 3 個 Input 元素屬性
我最近在 Twitter 偶然發現了Dan Abramov 的推文。他分享的一段簡短的程式碼引起了我注意的。這段程式碼使用 JavaScript 訪問 DOM（ API%2FDocument_Object_Model" rel="nofollow,noindex">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 測試這段程式碼。
以上是這次分享的全部內容。 :)