Document.caretRangeFromPoint()
Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
La méthode caretRangeFromPoint()
, rattachée à l'interface Document
, renvoie un objet Range
correspondant au fragment de document situé aux coordonnées indiquées.
Syntaxe
caretRangeFromPoint(x, y);
Paramètres
Valeur de retour
La valeur de retour peut être :
- Un objet
Range
- Ou
null
, six
ouy
sont négatifs, situés en dehors de la zone d'affichage ou s'il n'y a pas de nœud texte correspondant.
Exemples
Cliquez n'importe où dans le paragraphe Démo ci-après pour ajouter un saut de ligne à l'endroit du clic. Le code utilisé est décrit après.
Démo
Le code qui suit commence par vérifier la prise en charge de document.caretRangeFromPoint
. Si le navigateur ne prend pas en charge cette méthode, le code vérifie si document.caretPositionFromPoint
est disponible et l'utilise le cas échéant.
JavaScript
function insertBreakAtPoint(e) {
let range;
let textNode;
let offset;
if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
textNode = range.startContainer;
offset = range.startOffset;
} else if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(e.clientX, e.clientY);
textNode = range.offsetNode;
offset = range.offset;
} else {
document.body.textContent =
"[Ce navigateur ne supporte ni" +
" document.caretRangeFromPoint" +
" ni document.caretPositionFromPoint.]";
return;
}
// On opère uniquement sur le texte
if (textNode && textNode.nodeType == 3) {
let replacement = textNode.splitText(offset);
let br = document.createElement("br");
textNode.parentNode.insertBefore(br, replacement);
}
}
let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
}
HTML
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
Compatibilité des navigateurs
BCD tables only load in the browser