Document.caretPositionFromPoint() - 座標からキャレットの位置を取得する

2017/10/06

caretPositionFromPoint()は、Documentのメソッドです。指定した座標から最も近い、適切なキャレットの位置を返します。

概要

名前

caretPositionFromPoint

所属

IDL

CaretPosition? caretPositionFromPoint(double x, double y);

仕様書

https://drafts.csswg.org/cssom-view/#dom-document-caretpositionfrompoint

説明

第1引数(x)には、水平方向の座標を指定します。

第2引数(y)には、垂直方向の座標を指定します。

返り値は、キャレットの位置を表すCaretPositionです。

デモ

Document.caretPositionFromPoint()のデモです。クリックした位置の座標を引数にして、メソッドを実行します。また、その位置に擬似キャレットとして赤い縦棒を挿入します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
#caret {
	position: absolute ;
	background-color: red ;
	font-weight: 700 ;
	width: 4px ;
	height: 21px ;
}
</style>
</head>
<body>
<p id="hoge">SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER</p>
<hr>
<span id="caret"></span>
<div id="result"></div>
<script>
var element1 = document.getElementById( "result" ) ;
var element2 = document.getElementById( "hoge" ) ;
var element3 = document.getElementById( "caret" ) ;

document.body.onclick = function ( event ) {
	var x = event.clientX ;
	var y = event.clientY ;
	var caretPosition = document.caretPositionFromPoint( x, y ) ;

	console.log( caretPosition ) ;
	element1.textContent = caretPosition ;

	var domRect = caretPosition.getClientRect() ;
	element3.style.top = domRect.y + "px" ;
	element3.style.left = ( domRect.x - 2 ) + "px" ;
}
</script>
</body>
</html>