Ho un <p>
contenente testo. Quando si fa clic su <p>
, creo un <textarea>
contenente il testo dallo <p>
. È possibile calcolare dove nel testo <p>
si è verificato il clic e spostare il cursore <textarea>
sullo stesso punto?È possibile capire dove si è verificato un evento di clic del mouse nel testo di p?
risposta
Non ci credo, no. Il DOM sa solo quale elemento contenitore ha ricevuto l'evento click, non fa distinzioni tra parti di testo all'interno dell'elemento contenitore a meno che non si tratti di elementi. E dubito che tu voglia avvolgere ogni carattere nel tuo testo con il proprio tag elemento :)
Immagino che questo richiederà un bel po 'di giocherellare per avere ragione, e non sarai in grado di ottenere è esattamente giusto. Ma probabilmente vorrai usare event.clientX ed event.clientY.
EDIT - non sapevo di questa roba quando ho risposto. Sembra abbastanza possibile per farlo esattamente corretto. http://www.quirksmode.org/dom/range_intro.html
Un'idea alternativa: stile la textarea in modo che assomigli al testo semplice e ridisegnala per assomigliare a un campo modulo quando viene cliccato.
ooo, mi piace quell'idea alternativa. Potrei dover armeggiare con questo ad un certo punto nello sviluppo futuro. – David
bella idea re: textarea styling. Questa è la cosa più bella che ho pensato anche io, ma vedo ancora alcuni inconvenienti, ad es. quando più di un paragrafo è inserito in un '
Spero che questo semplice esempio aiuta:
<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>
Oppure si può utilizzare terze parti biblioteca JS come jQuery - vedi this example.
Penso che tu abbia ragione ... ma spero che ti sbagli! – Armand
@ La risposta di Yeti sembra contraddire quello che stai dicendo, David. È qualcosa di cui non ero a conoscenza. – morgancodes
@morgancodes: spero davvero che la soluzione di Yeti funzioni. Dovrò tenerlo in giro nel caso in cui io abbia mai incontrato la stessa cosa :) – David