Update value of input in realTime

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 ^^'