mardi 23 novembre 2010

textarea : selection d'une portion de texte

Récemment j'ai eu besoin de faire de la validation de format de contenu dans un champ de type TEXTAREA en HTML. La validation dépend bien évidemment du format, mais il me semblait intéressant d'indiquer à l'utilisateur où se trouve l'erreur et de bien lui montrer en surlignant (sélectionnant) la portion de texte qui n'est pas validée.
Un peu de javascript s'impose forcément et j'ai trouvé ce "trick" dans un forum

var form = document.forms[0];

/* Selection trick */
var erreurIndex = form.text.value.indexOf(item);
form.text.focus();
form.text.setSelectionRange(erreurIndex, erreurIndex + 1);
var evt = document.createEvent('KeyEvents');
evt.initKeyEvent('keypress', true, true, window, false, false, false, false, 0, form.text.value.charCodeAt(erreurIndex));
form.text.dispatchEvent(evt);
form.text.setSelectionRange(erreurIndex, erreurIndex + item.length);
En espérant que cela puisse en aider certains ... car personnellement j'ai eu du mal à trouver le code. :)

P.S. : ce code fonctionne avec Firefox, pour IE, il y a quelques lignes à rajouter :)