{"id":6765,"date":"2019-05-26T19:49:05","date_gmt":"2019-05-26T17:49:05","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6765"},"modified":"2020-09-02T21:06:09","modified_gmt":"2020-09-02T19:06:09","slug":"did-you-know-defaultvalue-input-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/javascript-en\/did-you-know-defaultvalue-input-javascript","title":{"rendered":"Did You Know \u2013 defaultValue for input in JavaScript"},"content":{"rendered":"

I keep writing this little series of Did You Know<\/strong> articles about specific little parts of the CSS, HTML or JavaScript. One little thing to learn, easy to digest and use in your dailywork. Last time it was about Lists and specific attributes like start<\/code>, reversed<\/code> and type<\/code> for ul<\/code> and ol<\/code> elements. This time, let’s dive into defaultValue<\/code> in JS.<\/p>\n

<\/p>\n

Defining defaultValue<\/code><\/h2>\n

As defined in the MDN<\/a>, the defaultValue<\/code> property is a string<\/code> that:<\/p>\n

Returns \/ Sets<\/strong> the default value as originally specified in the HTML that created this object.<\/p><\/blockquote>\n

In other words, the defaultValue<\/code> property is the value of an input<\/code> element as set the first time the HTML document is read. That means you can change the value of the input by typing thing in the field, or edit the value<\/code> property with JavaScript, the defaultValue<\/code> will remain the same.<\/p>\n

Code example of defaultValue<\/code> property<\/h2>\n

Imagine the code of a simple label<\/code> with input<\/code> (because you always set a label<\/code> for your input<\/code>, right?) like the following:<\/p>\n

<label for="input-1">What do you like?<\/label><input type="text" value="Something" id="input-1"><\/code><\/pre> 
 <\/div> <\/div>\n
The word “Something” appears in the field, you can edit it and put “Another Value” inside.
\nNow some JavaScript to retrieve the different values:<\/p>\n
 
let myinput = document.getElementById('input-1');console.log( myinput.value ); \/\/ returns "Another Value"myinput.value = 'JS Value';console.log( myinput.value ); \/\/ returns "JS Value"console.log( myinput.defaultValue ); \/\/ returns "Something"<\/code><\/pre> 
 <\/div> <\/div>\n
You can set the new value by hand or with script, it won’t change de defaultValue<\/code> value.
\nCan be really useful when it comes the time to edit data.<\/p>\n
I set you a little playground on Codepen if you want to test it and play with it.<\/p>\n
\nSee the Pen JavaScript defaultValue demo.<\/p>\n\n
And defaultChecked<\/code> for checkbox and radio<\/h2>\n
The property works exactly the same way than defaultValue<\/code>. I let you explore more the way you can use it in your context and dailywork, I never had the need to use it for the moment.<\/p>\n
And if you didn’t know, you can style with CSS your checkboxes and radio button. Read Custom Accessible Checkbox and Radio button in CSS<\/a> article to know how!<\/p>\n
Have fun and don’t hesitate to comment!<\/p>\n","protected":false},"excerpt":{"rendered":"
I keep writing this little series of Did You Know articles about specific little parts of the CSS, HTML or JavaScript. One little thing to learn, easy to digest and use in your dailywork. Last time it was about Lists and specific attributes like start, reversed and type for ul and ol elements. This time, […]<\/p>\n","protected":false},"author":4,"featured_media":6772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[657],"tags":[798,888,800,799,887],"coauthors":[597],"class_list":["post-6765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-en","tag-did-you-know","tag-forms-en","tag-input-en","tag-javascript-en","tag-webforms"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t