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

js
caretRangeFromPoint(x, y);

Paramètres

x

L'abscisse de la position ciblée au sein de la zone d'affichage (viewport) actuelle.

y

L'ordonnée de la position ciblée au sein de la zone d'affichage (viewport) actuelle.

Valeur de retour

La valeur de retour peut être :

  • Un objet Range
  • Ou null, si x ou y 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

must be provided

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

js
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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caretRangeFromPoint
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.