テキスト ボックス内のキャレットの (x, y) ピクセル座標を取得するにはどうすればよいですか?

Question

私はjQueryを使用しており、キャレットのピクセル座標を取得するクロスブラウザーの方法を見つけようとしています。 <textarea>砂 input この場所の周りに絶対位置の div を配置できるようなボックスです。

何かjQueryのプラグインはあるのでしょうか？それともそれを行うための JavaScript スニペットでしょうか?

Answer 1

textareaのキャレット座標プラグインを探しました 流星のオートコンプリート, そこで、GitHub 上の 8 つのプラグインすべてを評価しました。勝者は、断然、 テキストエリアキャレット位置 から 成分.

特徴

• ピクセル精度
• 依存関係は一切ありません
• ブラウザの互換性:Chrome、Safari、Firefox (にもかかわらず) 二 バグ あります）、IE9+;Opera、IE8 以前では動作する可能性がありますがテストされていません
• あらゆるフォント ファミリとサイズ、およびテキスト変換をサポートします
• テキスト領域には任意のパディングまたは境界線を含めることができます
• テキストエリアの水平スクロールバーまたは垂直スクロールバーに混乱しないようにする
• ハードリターン、タブ(IEを除く)、テキスト内の連続スペースをサポートします
• テキスト領域の列よりも長い行の正しい位置
• いいえ 空きスペースの「ゴースト」位置 長い単語を折り返すときの行末

これがデモです - http://jsfiddle.net/dandv/aFPA7/

使い方

鏡 <div> オフスクリーンで作成され、スタイルは <textarea>. 。次に、テキストエリアのキャレットまでのテキストが div にコピーされ、 <span> その直後に挿入されます。次に、擬似 div での折り返しを忠実に再現するために、スパンのテキスト コンテンツがテキストエリアのテキストの残りの部分に設定されます。

これは、長い行の折り返しに関連するすべてのエッジ ケースを処理することが保証されている唯一の方法です。GitHub がその位置を決定するためにも使用されます。 @ ユーザーのドロップダウン。

Answer 2

注記：この回答では、 文字座標 テキストカーソル/キャレットの。ピクセル座標を見つけるには、これをさらに拡張する必要があります。

最初に覚えておくべきことは、カーソルは 3 つの状態になれるということです。

• 特定の位置にある通常の挿入カーソル
• 特定の境界領域を持つテキスト選択
• 非活動中：textarea にはフォーカスがありません。使用されていません。

IE モデルはオブジェクトを使用します ドキュメントの選択, 、これから得られるのは、 テキスト範囲 このオブジェクトを使用すると、選択範囲、つまりカーソル位置にアクセスできるようになります。

FF モデル/Opera は、便利な変数 [input].selectionStart およびselectionEnd を使用します。

どちらのモデルも、通常のネイティブ カーソルを幅 0 の選択として表し、左境界がカーソル位置になります。

入力フィールドにフォーカスがない場合は、どちらも設定されていないことがわかります。次のコードでは、現在のカーソル位置にテキストを挿入し、現在の選択範囲が存在する場合はそれも置き換えることに成功しました。正確なブラウザーに応じて、YMMV。

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

バグメモ:リンクが上部パラグラフで正しくマークアップされていません。

選択オブジェクト: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
TextRange オブジェクト: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

すべてのブラウザでできるわけではないと思います。誰かがIE6でそれを実行しましたが、FFやOperaでは機能しません（私の知る限り）。おそらく、すべてのブラウザで動作させることができるでしょう。

2005 年のブログ投稿はこちら.