Document.caretRangeFromPoint()

Document インターフェイスの caretRangeFromPoint() メソッドは、指定された座標にある文書フラグメントの Range オブジェクトを返します。

構文

var range = document.caretRangeFromPoint(float x, float y);

引数

x

現在のビューポート内での水平位置。

y

現在のビューポート内での垂直位置。

返値

以下のうちの一つです。

• Range
• Null (x または y が負の数、ビューポート外、テキスト入力ノードがない場合)

例

基本的なデモ: 段落内をクリックすると、キャレットの位置に改行を挿入します。

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>

JavaScript

function insertBreakAtPoint(e) {
  let range;
  let textNode;
  let offset;

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;    
  } else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  }
  // Only split TEXT_NODEs
  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);
}

結果

ブラウザーの対応