我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
This method is used to retrieve the caret position in a document based on two coordinates. A CaretPosition
is returned, containing the found DOM node and the character offset in that node.
Syntax
var caretPosition = document.caretPositionFromPoint(float x, float y);
Parameters
- x
- A horizontal position within the current viewport.
- y
- A vertical position within the current viewport.
Return value
One of the following:
- A
CaretPosition
. Null
, if x or y are negative, outside viewport, or there is no text entry node.
Example
This example inserts line breaks wherever you click. The code for it is below the demo.
Demo
HTML Content
<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 Content
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 < paragraphs.length; i++) { paragraphs[i].addEventListener("click", insertBreakAtPoint, false); } };
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of ' caretPositionFromPoint ' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No support[1] | 20.0 (20.0)[2] | No support[1] | No support[3] | No support[1] | No support[1] |
Feature | Android | Firefox Mobile | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 20.0 (20.0)[2] | No support | No support | No support |
[1] WebKit, Blink and MS Edge has implemented document.caretRangeFromPoint(x,y)
from an older W3C draft. Also, note that a Range
is returned.
[2] Offsets in <textarea>
and <iframe>
elements aren't correct - see bug 824965 and bug 826069 for details.
[3] For MS Internet Explorer the proprietary method TextRange.moveToPoint(x,y)
might be helpful.
See also
CaretPosition
Range
Text
Selection
window.getSelection
Range.getBoundingClientRect()
- the inverse for this method (get coordinates of a range)Document.elementFromPoint()