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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
× | ● 23+ | × | × | × | × | × | × |
関連記事
- CaretPosition.offset
- offsetは、CaretPositionのプロパティです。キャレット位置を表す、ノードの先頭からのオフセットを返します。
- Selection
- Selectionは、ユーザーが選択した範囲の情報を管理するための機能を備えたインターフェイスです。
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。
- Range
- Rangeは、範囲を管理するための機能を備えたインターフェイスです。