[譯] 我在閱讀 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。