SYNCERのロゴ
アイキャッチ画像

CaretPosition.getClientRect() - 矩形を取得する

getClientRect()は、CaretPositionのメソッドです。キャレット位置を表すDOMRectを返します。

概要

名前
getClientRect
所属
CaretPosition
IDL
[NewObject] DOMRect? getClientRect();
仕様書
https://drafts.csswg.org/cssom-view/#dom-caretposition-getclientrect

説明

引数はありません。キャレット位置をDOMRectで表現した値を返します。

デモ

CaretPosition.getClientRect()のデモです。クリックした位置のCaretPositionを取得して、メソッドを実行します。キャレット位置にはスタイルシートで赤色を付けています。

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

<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }

#caret {
	position: absolute ;
	background-color: red ;
	font-weight: 700 ;
	width: 4px ;
	height: 21px ;
}
</style>
</head>
<body>
<p>1234567890 1234567890</p>
<p>SYNCER SYNCER SYNCER</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<hr>
<div id="result"></div>
<span id="caret"></span>
<script>
document.body.onclick = function ( event ) {
	document.getElementById( "result" ).textContent = "" ;

	var x = event.clientX ;
	var y = event.clientY ;
	var caretPosition = document.caretPositionFromPoint( x, y ) ;

	console.log( caretPosition ) ;
	appendText( caretPosition + "\n" ) ;
	appendText( "offsetNode: " + caretPosition.offsetNode + "\n" ) ;
	appendText( "offsetNode.data: " + caretPosition.offsetNode.data + "\n" ) ;
	appendText( "offset: " + caretPosition.offset + "\n\n" ) ;

	var domRect = caretPosition.getClientRect() ;
	appendText( "getClientRect(): " + domRect + "\n" ) ;

	var caretElement = document.getElementById( "caret" ) ;
	caretElement.style.top = domRect.y + "px" ;
	caretElement.style.left = ( domRect.x - 2 ) + "px" ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
× 23+××××××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月16日 (月)
コンテンツを公開しました。