Revision 1014707 of Document.caretPositionFromPoint()

<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>

<p>This method is used to retrieve the caret position in a document based on two coordinates. A {{domxref("CaretPosition")}} is returned, containing the found DOM node and the character offset in that node.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
var <em>caretPosition</em> = <em>document</em>.caretPositionFromPoint(float <em>x</em>, float <em>y</em>);
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt>x</dt>
 <dd>A horizontal position within the current viewport.</dd>
 <dt>y</dt>
 <dd>A vertical position within the current viewport.</dd>
</dl>

<h3 id="Return_value">Return value</h3>

<p>One of the following:</p>

<ul>
 <li>A {{domxref("CaretPosition")}}.</li>
 <li><code>Null</code>, if <strong>x</strong> or <strong>y</strong> are negative, outside viewport, or there is no text entry node.</li>
</ul>

<h2 id="Example">Example</h2>

<p>This example inserts line breaks wherever you click. The code for it is below the demo.&nbsp;&nbsp;</p>

<h3 id="Demo">Demo</h3>

<p>{{EmbedLiveSample('Example', '100%', '300px')}}</p>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">
&lt;p&gt;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.&lt;/p&gt;</pre>

<h3 id="JavaScript_Content">JavaScript Content</h3>

<pre class="brush: js">
function insertBreakAtPoint(e) {
  var range;
  var textNode;
  var 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.nodeType == 3) {
    var replacement = textNode.splitText(offset);
    var br = document.createElement('br');
    textNode.parentNode.insertBefore(br, replacement);
  }
}

window.onload = function (){
  var paragraphs = document.getElementsByTagName("p");
  for (i=0 ; i &lt; paragraphs.length; i++) {
    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
  }
};</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSSOM View", "#widl-Document-caretPositionFromPoint-CaretPosition-float-x-float-y", "<code>caretPositionFromPoint</code>")}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox</th>
   <th>Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] WebKit, Blink and MS Edge has implemented <code>document.caretRangeFromPoint(x,y)</code> from an <a href="https://www.w3.org/TR/2009/WD-cssom-view-20090804/#dom-documentview-caretrangefrompoint">older W3C draft</a>. Also, note that a {{domxref("Range")}} is returned.</p>

<p>[2] Offsets in {{HTMLElement("textarea")}} and {{HTMLElement("iframe")}} elements aren't correct - see {{bug("824965")}} and {{bug("826069")}} for details.</p>

<p>[3] For MS Internet Explorer the proprietary method <code>TextRange.moveToPoint(x,y)</code> might be helpful.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("CaretPosition")}}</li>
 <li>{{domxref("Range")}}</li>
 <li>{{domxref("Text")}}</li>
 <li>{{domxref("Selection")}}</li>
 <li>{{domxref("window.getSelection")}}</li>
 <li>{{domxref("Range.getBoundingClientRect()")}} - the inverse for this method (get coordinates of a range)</li>
</ul>