Synchro de deux text box sans boucler

Version imprimable

07/11/2012, 10h15
Nadinette

Synchro de deux text box sans boucler

Bonjour,

Je travaille avec ASP.net MVC et je dois remplir une boite de dialogue qui est initialisée par un IEnumerable et un EditorTemplate.

Pour les non initiés, les champs de l'éditor template sont dupliqués comme dans un repeater asp.net

Deux des champs de l'éditeur template doivent se synchroniser, j'entends par la que si je tape du texte dans le premier, j'aimerais que le second se mette à jour avec la valeur du premier à chaque touche tapée.

Là où ça se corse c'est que j'aimerais que le second mette à jour le premier quand on tape et je ne voudrais pas que ça se mette en boucle.

Je suis sure qu'avec une ligne JQuery on doit pouvoir écrire ça de manière élégante mais je ne trouve pas quelqu'un pourrait m'aider ?

Mici :)

Code:

1
2
3
4
$("#box1").keypress( function(){
    synch=$(this).val();
    $("#box2").val(synch)
})

Salut,

Si je veux que ça marche dans les deux sens je dois écrire deux fois la fonction ?

Code:

1
2
3
4
5
6
7
8
9
 
$("#box1").keypress( function(){
    synch=$(this).val();
    $("#box2").val(synch)
});
$("#box2").keypress( function(){
    synch=$(this).val();
    $("#box1").val(synch)
});

ou si j'affecte la classe syncBox a mes textbox à synchroniser ?

Code:

1
2
3
4
5
6
7
8
9
10
 
$(".syncBox").keypress( function(){
    synch=$(this).val();
    idToAvoid = $(this).id;
    $(".syncBox").each(function(idToAvoid,synch){
        if($(this).attr("id")!=idToAvoid){
             $(this).val(synch)
        }
    });        
});

D'après toi ?

Mici :)

Code:

1
2
3
4
5
$("#box1, #box2").keypress( function(){
    synch=$(this).val();
    cible=($(this).attr('id')=="box1")?"#box2":"#box1"
    $("cible").val(synch)
});

07/11/2012, 13h06
Nadinette

A la tienne est plus belle j'avoue ;)
Je ne savais pas que le selecteur JQuery pouvait être une collection de valeurs...

Merci

Code:

1
2
3
4
var $boxes = $("#box1, #box2");
$boxes.on('keypress', function(){
    $boxes.val(this.value);
});

;)

07/11/2012, 14h06
Nadinette

C'est encore plus beau. ;)
07/11/2012, 14h21
SpaceFrog

a noter que mieux vaut passer par keyup
mais cela ne prend pas encompte les cut et paste...
07/11/2012, 22h23
danielhagnoul
Bonsoir

Pour ne pas modifier une seconde fois la valeur de l'"input" que l'on est en train d'écrire à chaque "keyup" on peut l'exclure du sélecteur.
Code:

1 2 3 var jObjBoxes = $( "#box1, #box2" ).on( "keyup", function(){ jObjBoxes.not( this ).val( this.value ); });
07/11/2012, 23h14
Nadinette

Tout changement dans un champ doit déclencher une mise à jour dans l'autre, copier coller inclus.

Je crois qu'il faut ajouter un handler sur change pour être sûr, par contre, je ne sais pas si coller déclenche l'event.
08/11/2012, 08h46
SpaceFrog
Citation:

mais cela ne prend pas encompte les cut et paste...

suffit de binder deux evenements keyup et mouseup
Code:

1 2 var jObjBoxes = $( "#box1, #box2" ).on( "keyup mouseup paste copy input blur", function(){ jObjBoxes.not( this ).val( this.value );
sauf que sous IE<9 ça passe pas :(
08/11/2012, 12h45
Nadinette

Ah mais c'est trop top, on peut faire de l'ensemblisme même sur les handlers d'event. C'est bon à savoir, merci beaucoup :)