{"id":6775,"date":"2019-05-27T23:50:55","date_gmt":"2019-05-27T21:50:55","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6775"},"modified":"2019-09-08T14:52:55","modified_gmt":"2019-09-08T12:52:55","slug":"le-saviez-vous-defaultvalue-en-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/javascript\/le-saviez-vous-defaultvalue-en-javascript","title":{"rendered":"Le saviez-vous \u2013 defaultValue en JavaScript"},"content":{"rendered":"

Je continue d’\u00e9crire cette s\u00e9rie d’articles sur des petites parties sp\u00e9cifiques de CSS, HTML ou JavaScript. Une petite chose \u00e0 apprendre, facile \u00e0 dig\u00e9rer et \u00e0 utiliser dans votre travail quotidien. La derni\u00e8re fois, il s’agissait de listes et d’attributs sp\u00e9cifiques comme start<\/code>, reversed<\/code> et type<\/code> pour les \u00e9l\u00e9ments ul<\/code> et ol<\/code>. Cette fois, plongeons dans defaultValue<\/code> dans JS.<\/p>\n

<\/p>\n

D\u00e9finissons defaultValue<\/code><\/h2>\n

Comme d\u00e9fini dans le MDN<\/a>, la propri\u00e9t\u00e9 defaultValue<\/code> est une string<\/code> qui :<\/p>\n

\n

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

En d’autres termes, la propri\u00e9t\u00e9 defaultValue<\/code> est la valeur d’un \u00e9l\u00e9ment input<\/code> telle que renseign\u00e9e la premi\u00e8re fois que le document HTML est lu. Cela signifie que vous pouvez changer la valeur du champ en tapant dedans ou en \u00e9ditant la propri\u00e9t\u00e9 value<\/code> en JavaScript, la defaultValue<\/code> restera la m\u00eame.<\/p>\n

Exemple de code avec defaultValue<\/code><\/h2>\n

Imaginez le code assez simple d’un label<\/code> et d’un input<\/code> (parce que vous avez toujours un label<\/code> pour votre input<\/code>, hein ?) comme suit :<\/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 mot \u00ab\u00a0Something<\/span>\u00a0\u00bb apparait dans le champ, vous pouvez l’\u00e9diter et mettre la valeur \u00ab\u00a0Another Value<\/span>\u00a0\u00bb dedans.
\nMaintenant, un peu de JavaScript pour retrouver les valeurs.<\/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
Vous pouvez renseigner une nouvelle valeur \u00e0 la main ou avec un script, cela ne change pas la valeur de\u00a0 defaultValue<\/code>.
\nCela peut \u00eatre tr\u00e8s utile quand vient le moment d’\u00e9diter du contenu dans un formulaire pr\u00e9rempli.<\/p>\n
Je vous ai pr\u00e9par\u00e9 un petit bac \u00e0 sable sur Codepen si vous souhaitez tester et jouer avec..<\/p>\n
\nSee the Pen JavaScript defaultValue demo.<\/p>\n\n
Et defaultChecked<\/code> pour les checkbox et radio<\/h2>\n
La propri\u00e9t\u00e9 fonctionne exactement de la m\u00eame mani\u00e8re que defaultValue<\/code>. Je vais vous laisser explorer davantage la mani\u00e8re dont vous pourriez l’utiliser dans votre contexte de travail, je n’ai jamais eu l’occasion de l’utiliser pour le moment.<\/p>\n
Amusez-vous bien et n’h\u00e9sitez pas \u00e0 commenter !<\/p>\n","protected":false},"excerpt":{"rendered":"
Je continue d’\u00e9crire cette s\u00e9rie d’articles sur des petites parties sp\u00e9cifiques de CSS, HTML ou JavaScript. Une petite chose \u00e0 apprendre, facile \u00e0 dig\u00e9rer et \u00e0 utiliser dans votre travail quotidien. La derni\u00e8re fois, il s’agissait de listes et d’attributs sp\u00e9cifiques comme start, reversed et type pour les \u00e9l\u00e9ments ul et ol. Cette fois, plongeons […]<\/p>\n","protected":false},"author":4,"featured_media":6773,"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":[610],"tags":[432,490,789],"coauthors":[597],"class_list":["post-6775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-formulaire","tag-input","tag-le-saviez-vous"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6775"}],"version-history":[{"count":2,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6775\/revisions"}],"predecessor-version":[{"id":6903,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6775\/revisions\/6903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6773"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6775"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}