Discussion :

[Nadinette]

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

[SpaceFrog]

Code :

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

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

[Nadinette]

Salut,

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

Code :

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

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 :

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

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

[SpaceFrog]

Code :

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

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

[Nadinette]

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

Merci

[Bovino]

Code :

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

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

[Nadinette]

C'est encore plus beau.

[SpaceFrog]

a noter que mieux vaut passer par keyup
mais cela ne prend pas encompte les cut et paste...

[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 :

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

1
2
3
var jObjBoxes = $( "#box1, #box2" ).on( "keyup", function(){
    jObjBoxes.not( this ).val( this.value );
});

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

[SpaceFrog]

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

suffit de binder deux evenements keyup et mouseup

Code :

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

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

[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