Wie kann ich die Textauswahl spiegeln?

Angenommen, Sie haben zwei Eingänge:Wie kann ich die Textauswahl spiegeln?

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

, dass durch einige JavaScript Magie, alles, was Sie in input1 Typ wird auch in input2 gestellt werden. In diesem Sinne "spiegelt" Eingang2 Eingang1.

Gibt es einen Weg, dass ich auch Textauswahl "spiegeln" kann. Also, wenn ich in Input1 einen Text auswähle, wie kann ich dann den exakt gleichen Text in Input2 auswählen?

Ich habe Microsofts TextRange-Objekt und das von Mozilla et al verwendete Selection-Objekt angeschaut, aber das ganze Durcheinander scheint ziemlich beschwerlich zu sein. Hat jemand schon einmal etwas Erfolg gehabt?

Erläuterung: Vielen Dank für die Antworten bisher. Um es klar zu sagen: Ich frage nicht, wie ich den Text spiegeln soll. Ich habe das schon gelöst. Die Frage besteht nur darin, den Text in Eingabe1 auszuwählen und den entsprechenden Text in Eingabe2 ebenfalls auszuwählen.

Quelle

2009-08-25 ntownsend

Es ist sehr einfach in Firefox und Opera, soweit ich das sehe. Google Chrome und IE nicht so sehr. Hier ist der Code, der in FF funktioniert:

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

Quelle

2009-08-25 21:04:11

Ich bin nicht einmal sicher, ob diese Browser die Auswahl mehrerer Teile auf der Seite gleichzeitig unterstützen. –

Funktioniert gut in Firefox. Ich hatte keine Ahnung, dass Mehrfachauswahl möglich war. – artlung

Ich sollte klarstellen: getestet in FF 3.5.2 und funktioniert super. – artlung

-1

Wenn Sie mit der Verwendung von JQuery leben können, dann können Klonen auf diese Weise geschehen:

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

Quelle

2009-08-25 20:38:00 Zed

Sie können den ersten Teil Sie fragen tun (wie meine Antwort here), aber nicht den zweiten Teil - es ist Es ist einfach nicht möglich, mehr als einen aktiven ausgewählten Bereich gleichzeitig zu haben.

Quelle

2009-08-25 20:38:49

Antwort

Verwandte Themen