Le saviez-vous – defaultValue en JavaScript

Also available in: English

Je continue d’écrire cette série d’articles sur des petites parties spécifiques de CSS, HTML ou JavaScript. Une petite chose à apprendre, facile à digérer et à utiliser dans votre travail quotidien. La dernière fois, il s’agissait de listes et d’attributs spécifiques comme start, reversed et type pour les éléments ul et ol. Cette fois, plongeons dans defaultValue dans JS.

Définissons defaultValue

Comme défini dans le MDN, la propriété defaultValue est une string qui :

Returns / Sets the default value as originally specified in the HTML that created this object.

En d’autres termes, la propriété defaultValue est la valeur d’un élément input telle que renseignée la première fois que le document HTML est lu. Cela signifie que vous pouvez changer la valeur du champ en tapant dedans ou en éditant la propriété value en JavaScript, la defaultValue restera la même.

Exemple de code avec defaultValue

Imaginez le code assez simple d’un label et d’un input (parce que vous avez toujours un label pour votre input, hein ?) comme suit :

<label for="input-1">What do you like?</label>
<input type="text" value="Something" id="input-1">

The mot « Something » apparait dans le champ, vous pouvez l’éditer et mettre la valeur « Another Value » dedans.
Maintenant, un peu de JavaScript pour retrouver les valeurs.

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"

Vous pouvez renseigner une nouvelle valeur à la main ou avec un script, cela ne change pas la valeur de  defaultValue.
Cela peut être très utile quand vient le moment d’éditer du contenu dans un formulaire prérempli.

Je vous ai préparé un petit bac à sable sur Codepen si vous souhaitez tester et jouer avec..

See the Pen JavaScript defaultValue demo.

Et defaultChecked pour les checkbox et radio

La propriété fonctionne exactement de la même manière que defaultValue. Je vais vous laisser explorer davantage la manière dont vous pourriez l’utiliser dans votre contexte de travail, je n’ai jamais eu l’occasion de l’utiliser pour le moment.

Amusez-vous bien et n’hésitez pas à commenter !