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

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 (en-US) 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

BCD tables only load in the browser