Update value of input in realTime

Par Tekrai, il y a 6 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.
Je tiens à préciser que je suis totalement débutant en javascript.

Ce que je fais

J'essaie de mettre à jour en temps réel la valeur de mon champ input#task-date de manière à ce que lorsque l'utilisateur souhaite mettre une date de type (YYYY-MM-DD), les tirets - se mettent automatiquement.

<form class="simple-form" action="process/addtask.php" method="post"> <input type="text" name="task-date" id="task-date" onchange="" placeholder="YYYY-MM-DD"> <select name="task-cat"> <option disabled="disabled">Select a categorie</option> <option value="other">Other</option> <option value="music">Music</option> </select> <textarea name="task-content" rows="8" cols="80"></textarea> <button type="button" name="">Add Task</button> </form> </div> <script type="text/javascript"> var task_date = document.getElementById('task-date'); task_date.addEventListener('change', updateField); function updateField (){ var val = task_date.value; if(val.lenghth == 4){ val += '-'; task_date.value = val; } } </script>

Ce que j'obtiens

Pour l'instant j'ai réussi à mettre la valeur de mon champ à jour, mais seulement lorsque l'utilisateur quitte le champ. J'aurais aimé savoir s'il existait un moyen simple de le faire de manière dynamique. (C'est-à-dire que l'utilisateur n'aurait pas à quitter le champ pour que le tiret se rajoute).
Je me doute que la manipulation a effectué est sans doute toute bête, mais ça va faire + de 45 minutes que je reste dessus.

Merci énormément par avance de l'aide que vous me fournirez,
Tekrai.

PS: si quelqu'un pouvait m'éclairer sur la manière d'écrire champ, avec ou sans s j'ai un doute ^^'

2 réponses

Pierrot01, il y a 6 ans

Salut,
Au lieu de prendre l'évenement change il faut prendre l'évenement keypres

@plus

Pierre

Tekrai, il y a 6 ans

@Pierrot01, effectivement c'était tout bête :-p

Merci beaucoup !