Javascript Girl
  1. Javascript Girl
  3. Est-il possible de déterminer où, dans le texte d'un p, un événement de clic de souris s'est produit?
Intereting Posts
Envoi de données binaires à une servlet Location.host vs location.hostname et compatibilité entre navigateurs? Deux «dygraphes» avec un sillon synchronisé JavaScript – Avantages de l'objet littéraire Est-ce que JavaScript est garanti pour être simple thread? Par défaut, le codage de caractères Javascript? Ensemble de lecture de jave servlet en javascript Comment combiner OR logique avec AND ET logique dans un sélecteur d'attributs jQuery? Apache HttpClient 4 et JavaScript Multiplie tous les éléments en tableau Héritage de Javascript: appelant Object.create lors du réglage d'un prototype JQuery DataTables deux lignes dans la tête: noms et tri des lignes de la première rangée, filtrage de la deuxième rangée JQuery Slideshow Image Transition L'approvisionnement en javascript local dans uiwebview ios La barre de défilement apparaît / disparaît dans jQuery?

Est-il possible de déterminer où, dans le texte d'un p, un événement de clic de souris s'est produit?

J'ai un texte contenant <p> . Lorsque <p> est cliqué dessus, je crée un <textarea> contenant le texte de <p> . Est-il possible de calculer où, dans le texte de la <p> , le clic s'est produit, et déplacer le curseur de <textarea> sur ce même point?

Je ne le crois pas non. Le DOM sait simplement ce qui contient l'élément reçu l'événement de clic, il ne distingue pas les morceaux de texte dans l'élément contenant, à moins qu'ils ne soient des éléments eux-mêmes. Et je doute que vous souhaitez envelopper tous les caractères de votre texte avec sa propre étiquette d'élément 🙂

J'espère que cet exemple simple aide: 

 <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 une bibliothèque JS tierce comme jQuery – voir cet exemple .

Je suppose que cela va prendre une bonne quantité de violences pour avoir raison, et vous ne pourrez pas le faire exactement. Mais vous voudrez probablement utiliser event.clientX et event.clientY.

EDIT – ne savait pas ce sujet quand j'ai répondu. Il semble très possible de l'obtenir exactement. http://www.quirksmode.org/dom/range_intro.html

Une idée alternative: formez la zone de texte afin qu'elle ressemble à du texte brut, et ré-style pour ressembler à un champ de formulaire quand il a cliqué.