[譯] 我在閱讀 MDN 時發現的 3 個 Input 元素屬性

ssshooter發表於2018-10-09

我最近在 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;
複製程式碼

Checkbox in indeterminate state including a dash instead of being empty or including a checkmark

將 indeterminate 設定為 true 對核取方塊的值沒有任何影響，我想到的唯一應用場景是 Chris Coyier 在 CSSTricks 提到的 巢狀核取方塊。

indeterminate 不僅適用於核取方塊，還可以用於單選按鈕和進度元素。假設有一組單選按鈕，沒有一個按鈕被選擇。在你未作出選擇前，它們都沒有被選中同時也都沒有不被選中，這時它們就處於 indeterminate 狀態。

還有一種玩法，你可以對被選定元素使用 CSS 偽類 :indeterminate，這樣可以在單選按鈕組未被選擇時方便展示一些特殊的 UI 元件。

Radio buttons followed by a message showcasing the :indeterminate pseudo-class

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}
複製程式碼

有關 indeterminate 屬性的有趣之處在於你可以將它設定為 true 或 false，這將影響核取方塊的偽類，但不會影響單選按鈕。對於單選按鈕，按鈕組的實際選擇狀態始終是正確的。

順道提一下，progress 元素 在未定義 value 屬性時也將匹配 :indeterminate 選擇器。

indeterminate 在 MDN 的定義如下：

[它]表示核取方塊或單選按鈕沒有值且處於不確定的狀態。核取方塊的外觀會變成第三個狀態，但這不影響 checked 屬性的值，單擊核取方塊會將值設定為 false。

你可以在 CodePen 測試這段程式碼。

selectionStart、selectionEnd 和 selectionDirection

這三個屬性可以確定使用者選擇的內容，並且使用起來非常簡單。如果使用者在輸入欄位中選擇文字，則可以使用這三個屬性計算所選內容。

Input with selected characters

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

相關文章