détecter saisie immédiate

**SpaceFrog** · 07/11/2012, 11h05

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

Code :

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

1
2
 
$("#foo").bind("propertychange",function(){	alert('saisie') })

fonctionne sous IE mais pas FFX

Code :

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

1
2
 
$("#foo").on("propertychange",function(){	alert('saisie') })

fonctionne sous IE mais pas FFX

Code :

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

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

et

Code :

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

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 ?

**Bovino** · 07/11/2012, 11h32

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

Code html :

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

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...

**SpaceFrog** · 07/11/2012, 12h01

autant faire un bind multievents ?

Code :

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

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

**marcbuils** · 07/11/2012, 13h10

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 :

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

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 :

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

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/

détecter saisie immédiate

jQuery

Discussions similaires

Partager

Partager