J'ai un <p>
contenant du texte. Lorsque le <p>
est cliqué sur, je crée un <textarea>
contenant le texte du <p>
. Est-il possible de calculer où dans le <p>
texte d « un clic a eu lieu, et déplacez le <textarea>
» curseur s à ce même point?Est-il possible de déterminer où se trouve un événement de clic de souris dans le texte d'un p?
Répondre
Je ne crois pas, non. Le DOM sait juste quel élément contenant a reçu l'événement click, il ne fait pas de distinction entre les parties de texte dans l'élément contenant sauf s'il s'agit d'éléments eux-mêmes. Et je doute que vous vouliez envelopper chaque caractère de votre texte avec sa propre balise d'élément :)
Je suppose que cela va prendre pas mal de fiddling pour aller droit, et vous ne serez pas en mesure d'obtenir c'est tout à fait vrai. Mais vous voudrez probablement utiliser event.clientX et event.clientY.
EDIT - ne savait pas ce genre de choses quand je lui répondis. Il semble assez possible de le faire exactement correct. Une idée alternative: personnalisez la zone de texte afin qu'elle ressemble à du texte brut et redessinez-la pour qu'elle ressemble à un champ de formulaire lorsque vous cliquez dessus.
ooo, j'aime cette idée alternative. Je devrais peut-être bricoler avec cela à un moment donné dans le développement futur. – David
bonne idée re: textarea style. C'est la plus belle chose à laquelle j'ai pensé, mais je vois encore quelques inconvénients, par ex. Lorsque plus d'un paragraphe est entré dans un «
espère que cet exemple simple permet:
<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>
Ou vous pouvez utiliser la bibliothèque JS tiers comme jQuery - voir this example.
Je pense que vous avez raison ... mais je l'espère, vous avez tort! – Armand
@ La réponse de Yeti semble contredire ce que vous dites, David. C'est quelque chose que je ne connaissais pas non plus. – morgancodes
@morgancodes: J'espère que la solution de Yeti fonctionne. Je vais devoir le garder au cas où je rencontrerais la même chose :) – David