Discussion :

[rafmix]

Bonsoir,

J'ai un petit souci dans un formulaire, j'aimerais afficher une div au moindre changement dans un input ou un texarea (ckeditor).

Pour l'instant, j'utilise .change + jquery.validationEngine.js pour la validité des champs, mon souci est que ce soit .change (ou .blur) cela ne fonctionne que lorsqu'on sort de l'input par un clic dans une autre zone, ou une tabulation pour aller à l'input suivant... Problème qui n'existe pas, bien sûr, sur les checkbox ou select.

Je n'ai pas trouvé de plugin sympa pour résoudre ça. Les solutions que j'envisage sont le lancement d'une fonction avec un intervalle de temps lors du clic sur un input (bof/bof + je ne sais pas encore comment faire pour arrêter cette fonction, histoire de ne pas bouffer tout le CPU) ou une détection sur la div contenant (pire, je modifie mon input sans sortir de cet input, ma div ne s'affiche pas ^^).


Si quelqu'un a une idée, je suis preneur.

Merci d'avance, bon code...

Sinon, je viens de trouver ça. J'ai cherché (mal) hier pendant deux heures et la bonne soluce semble être $('form').keyup(function(event) { }).

[SpaceFrog]

keyup keypress keydown mousedown mouseup
ce ne sont pas les evenements qui manquent

à noter que ton keyup ne couvrira pas le copier coller à la souri

[rafmix]

Merci pour la réponse.

Je cherche une solution où je ne dois pas faire toutes les possibilités d’évènement ; un .change en temps réel m'arrangerait bien.

Sinon, y a-t-il une syntaxe pour associer des évènements du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('form').(keyup,keypress)(function(event) { })

Pour eviter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('form').keyup(function(event) { }) 
$('form').keypress(function(event) { })

C'est plus pour info générale que pour ce cas précis. Si je dois faire 5/10 lignes pour mon cas, pas grave...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('form').bind(keyup,keypress)(function(event) { })

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('form').on('input', 'input, select, textarea', function(e){
    alert(e.target.value);
});

[SpaceFrog]

on balise ??? kesaquo ?

[rafmix]

grand merci à la grenouille

balise on remplace la balise live, il me semble

[Bovino]

Non, on utilise l'événement oninput

[SpaceFrog]

ontextarea ? ça existe aussi ... des evenements spécifiques aux elements de form ?

[Bovino]

Non
Dans le bout de code que j'ai proposé, il faut différencier l'événement (le premier argument, soit 'input') des éléments auxquels il est attaché passés en deuxième argument (les balises <input>, <select> et <textarea>).
L'événement oninput étant déclenché lorsque la valeur d'un élément de formulaire est modifiée.

[SpaceFrog]

ha ok j'avais pas vu les deux params :red:

[rafmix]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('form').on('input', 'input, select, textarea', function(e){
    alert(e.target.value);
});

marche nikel

sauf pour ckeditor...normal vais voir ce que je trouve, j'ai dejà un on('blur'... mais pas en temps réel

[danielhagnoul]

L'événement "oninput" introduit par HTML5 est très intéressant, mais il n'est pas officiellement implémenté dans jQuery et il ne fonctionne pas partout : http://bugs.jquery.com/ticket/9121

[SpaceFrog]

pour ckeditor il faut aller fouiller dans le code source html généré afin de voir quel est l'element généré

[rafmix]

pour ckeditor, j'ai trouvé merci par contre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $('form').on('input', 'input, textarea, select, checkbox', function(e){
...
        });

ne fonctionne pas pour les select ^^; pas grave, ai mis un change sur select mais tout de même surpris..

++ grand merci pour l'aide apportée