[Edge]実験的⛌。→
実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Document または ShadowRoot で、DOM ノードを含む CaretPosition オブジェクトを、そのノード内のキャレットとキャレットの文字オフセットと共に返します。
| x、 y | [float]。取得する x、y 座標。 |
|---|
CaretPosition オブジェクト。
この例では、クリックした場所に改行を挿入します。
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) {
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);
}
};