• Three Input element properties that I discovered while reading MDN
  • By Stefan Judis
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: ssshooter
  • Proofreader: GpingFeng Park-Ma

I recently stumbled across a tweet from Dan Abramov on Twitter. He shared a short piece of code that caught my attention. This code uses JavaScript to access the input element in the DOM (Document Object Model) and reads or changes some of its properties, of which the defaultValue attribute amazes me.

I immediately opened MDN to read more about the defaultValue attribute of HTTMLInputElement and stumbled across some attributes I didn’t know about, which is why I’m writing this short article.

So let’s get started!

defaultValue

This is an example from Dan’s tweet — the HTML code has an input element that has a value attribute (attributes are defined in HTML code, and properties are JavaScript objects).

<input type="text" value="Hello world">
Copy the code

Now you can find this element and do something with it.

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'
Copy the code

As you can see, the value defined in the attribute value is initially reflected in the element attribute value, which is nothing special, but when you change the value, you can still access the “initial value” using defaultValue (defaultChecked is also available in the checkbox), which is cool!

DefaultValue is defined in MDN as follows:

[It] returns/sets the default value originally specified in the HTML that created this object.

You can test this code in CodePen.

indeterminate

The IndeTerminate attribute is a fascinating one. Did you know that check boxes have other visible states besides selected and unselected? Indeterminate is a property (there is no corresponding attribute), and you may sometimes see checkboxes with little dashes, which you can do with this attribute.

const input = document.querySelector('input');
input.indeterminate = true;
Copy the code

Setting IndeTerminate to true has no effect on the value of the check box, and the only application I can think of is the nested check box mentioned by Chris Coyier in CSSTricks.

Indeterminate applies not only to check boxes, but also to radio buttons and progress elements. Suppose you have a set of radio buttons, and none of them are selected. They’re indeterminate when none of them are selected and none of them are unselected before you make a selection.

As an alternative, you can use CSS pseudo-classes for selected elements: IndeTerminate, which makes it easier to display specific UI components when the radio button group is not selected.

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}
Copy the code

The interesting thing about the IndeTerminate property is that you can set it to true or false, which affects the pseudo class of the check box, but not the radio button. For radio buttons, the actual selection state of the button group is always correct.

By the way, the progress element will also match if the value attribute is not defined: the IndeTerminate selector.

Indeterminate in MDN is defined as follows:

[It] indicates that a check box or radio button has no value and is in an indeterminate state. The checkbox looks like the third state, but it doesn’t affect the value of the Checked property. Clicking the checkbox sets the value to false.

You can test this code in CodePen.

selectionStart,selectionEnd 和 selectionDirection

These three properties determine what the user chooses and are very simple to use. If a user selects text in an input field, these three attributes can be used to calculate the selection.

const input = document.querySelector('input');

setInterval( _ => { console.log( input.selectionStart, input.selectionEnd, input.selectionDirection; ) ; // e.g. 2, 5,"forward"}, 1000).Copy the code

The purpose of this test code is to record the selection value once per second. SelectionStart and selectionEnd return the index that describes where I selected, but when you select with the mouse or trackpad selectionDirection returns None, Selecting text with SHIFT and arrows returns either a forward or a backward.

You can test this code in CodePen.

That’s all for this share. 🙂

Quick and easy summary

MDN is a fantastic website. Even after eight years of using input elements, I’m still discovering new gameplay, which is what I love about Web development. I’ll be reading randommdn articles on a regular basis (I have a daily slack-bot that reminds me to open bit.ly/randommdn), because there’s no end to learning! I highly recommend MDN!

Thanks for reading! ❤ ️

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.