détecter saisie immédiate

Version imprimable

07/11/2012, 11h05
SpaceFrog

détecter saisie immédiate
Je me penchais sur la problématique de la détection de sasie immédiate dans un input
Code:

1 2 $("#foo").bind("propertychange",function(){ alert('saisie') })
fonctionne sous IE mais pas FFX
Code:

1 2 $("#foo").on("propertychange",function(){ alert('saisie') })
fonctionne sous IE mais pas FFX
Code:

1 2 $("#foo").bind("input",function(){ alert('saisie') })
et
Code:

1 2 $("#foo").on("input",function(){ alert('saisie') })
sont supposés fonctionner sous jquery 1.7+ mais je n'ai pas eu beaucoup de succès avec

keypress et keyup sont limitatif quand aux trigger ...
change implique un changement du contenu LORS de la perte de focus

Quel est selon vous le meilleur moyen ?

oninput fonctionne correctement (enfin, pour IE à partir de 9) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>oninput</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
                jQuery(function($){
                        $('#foo').on('input', function(){
                                console.log('Nouvelle valeur : ', this.value);
                        });
                });
        </script>
</head>
<body>
	<input id="foo" />
</body>
</html>

Seul défaut pour IE, l'événement n'est pas déclenché lorsque tu supprimes des caractères et je ne crois pas qu'il y ai de solution pour ça...

07/11/2012, 12h01
SpaceFrog

autant faire un bind multievents ?

Code:

$("#foo").bind("keyup mouseup .... ",function(){ alert('saisie') })

Bonjour SpaceFrog,

Personnellement je ferais du multievents en mappant les events paste et cut.
Le problème de ces events c'est qu'ils sont appelé avant de modifier le texte de l'input, il faut donc un délai avant de lire le texte.

Exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <input type="text" id="foo" /> <div id="result"></div> <script> $('#foo').on('input keyup paste cut', function(){ $(this).delay(10).queue(function(){ $('#result').text( $(this).val() ); $(this).dequeue(); }); }); </script>
Démo:
http://jsfiddle.net/marcbuils/rzM8k/2/

Pour ce genre de chose je te conseillerais même un de mes plugins: jQuery.waiting (http://marcbuils.github.com/jquery.waiting/) qui te permet d'être certain de ne pas remplir la queue lorsque l'utilisateur laisse une touche appuyé puisqu'il ne conserve que le dernier élément:
Code:

1 2 3 4 5 6 7 8 9 10 11 <input type="text" id="foo" /> <div id="result"></div> <script> $('#foo').on('input keyup paste cut', function(){ $(this).waiting(10).done(function(){ $('#result').text( $(this).val() ); }); }); </script>
Démo:
http://jsfiddle.net/marcbuils/XVLrq/