Ich habe eine <p>
mit Text. Wenn auf <p>
geklickt wird, erstelle ich einen <textarea>
, der den Text von <p>
enthält. Ist es möglich, zu berechnen, wo in dem Text <p>
der Klick aufgetreten ist, und den Cursor <textarea>
auf denselben Punkt verschieben?Ist es möglich herauszufinden, wo in einem p-Text ein Mausklick-Ereignis aufgetreten ist?
Antwort
Ich glaube nicht, nein. Das DOM weiß nur, welches containing-Element das Click-Ereignis erhalten hat, es unterscheidet nicht zwischen Textstücken innerhalb des enthaltenden Elements, es sei denn, sie sind selbst Elemente. Und ich bezweifle, dass Sie jedes Zeichen in Ihrem Text mit einem eigenen Element-Tag umhüllen wollen :)
Ich schätze, das wird eine Menge fummeln, um richtig zu machen, und Sie werden nicht in der Lage sein zu bekommen es genau richtig. Aber Sie werden wahrscheinlich event.clientX und event.clientY verwenden wollen.
EDIT - wusste nicht über dieses Zeug, als ich antwortete. Sieht ziemlich genau aus, um es genau zu korrigieren.
Eine alternative Idee: Formatieren Sie das Textfeld so, dass es wie einfacher Text aussieht, und formatieren Sie es so, dass es wie ein Formularfeld aussieht, wenn es angeklickt wird.
ooo, ich mag diese alternative Idee. Daran muss ich irgendwann in der zukünftigen Entwicklung herumflechten. – David
nette Idee re: textarea styling. Das ist das Schönste, an das ich auch gedacht habe, aber ich sehe immer noch einige Nachteile, z. Wenn mehr als ein Absatz in eine "
Hoffnung dieses einfache Beispiel hilft:
<html>
<head/>
<body>
<script type='text/javascript'>
function getPosition()
{
var currentRange=window.getSelection().getRangeAt(0);
return currentRange.endOffset;
}
function setPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
function test()
{
setPosition('testId', getPosition());
}
</script>
<p onclick = 'test()'>1234567890</p>
<textarea id='testId'>123467890</textarea>
</body>
</html>
Oder können Sie von Drittanbietern JS-Bibliothek wie jQuery verwenden - this example sehen.
Ich denke, du hast recht ... aber ich hoffe, du liegst falsch! – Armand
@ Yetis Antwort scheint zu widersprechen, was du sagst, David. Das ist mir auch nicht bewusst. – morgancodes
@morgancodes: Ich hoffe natürlich, Yetis Lösung funktioniert. Ich werde es behalten müssen, falls ich jemals auf dasselbe stoße :) – David