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);
}

結果

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
caretRangeFromPoint
非標準
Chrome 完全対応 8Edge 完全対応 12Firefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。