2009-08-25 13 views
1

Supposons que vous avez deux entrées:Comment puis-je refléter la sélection de texte?

<input id="input1" type="text"/> et <input id="input2" type="text"/>

tels que, par magie JavaScript, tout ce que vous tapez dans input1 sera également mis en input2. Dans ce sens, input2 "reflète" input1.

Existe-t-il un moyen de "refléter" la sélection de texte? Donc, si je sélectionne du texte dans input1, comment puis-je avoir le même texte dans input2 également être sélectionné?

J'ai regardé l'objet TextRange de Microsoft et l'objet Selection utilisé par Mozilla et al, mais tout le désordre semble assez lourd. Quelqu'un at-il eu du succès en faisant quelque chose comme ça avant? CLARIFICATION: Merci pour les réponses à ce jour. Pour être clair: je ne demande pas comment refléter le texte. J'ai déjà résolu celui-là. La question concerne uniquement la sélection du texte en entrée1 et la sélection du texte correspondant en entrée2.

Répondre

1

C'est très facile dans Firefox et Opera autant que je vois. Google Chrome et IE pas tellement. Voici le code qui fonctionne dans FF:

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<body> 

<input type="text" size="40" id="sel-1" value="Some long text"> 
<input type="text" size="40" id="sel-2" value="Some long text"> 

<script type="text/javascript"> 
var sel_1 = document.getElementById("sel-1"); 
var sel_2 = document.getElementById("sel-2"); 

document.onmousemove = function() { 
    sel_2.selectionStart = sel_1.selectionStart; 
    sel_2.selectionEnd = sel_1.selectionEnd; 
} 
</script> 
</body> 
</html> 
+0

Je ne suis même pas sûr que ces navigateurs prennent en charge la sélection de plusieurs parties sur la page en même temps. –

+0

Fonctionne bien dans Firefox. Je n'avais aucune idée que plusieurs sélections étaient possibles. – artlung

+0

Je devrais préciser: testé en FF 3.5.2 et fonctionne très bien. – artlung

-1

Si vous pouvez vivre avec l'aide JQuery, puis le clonage peut être fait de cette façon:

$("#input1").keyup(function() { 
    $("#input2").val($("#input1").val()); 
} 
0

Vous pouvez faire la première partie vous poser des questions sur (comme ma réponse here), mais pas la 2ème partie - il est il n'est tout simplement pas possible d'avoir plus d'une plage sélectionnée active à la fois.