37

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

jQueryプラグインはありますか？それとも JavaScript スニペットでそれを行うのですか?

4

2 に答える 2

42

meteor-autocompleteの textarea キャレット座標プラグインを探したので、GitHub で 8 つのプラグインすべてを評価しました。勝者は、断然、Componentの textarea-caret-positionです。

特徴

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

ここにデモがあります - http://jsfiddle.net/dandv/aFPA7/

ここに画像の説明を入力

使い方

ミラー<div>はオフスクリーンで作成され、 とまったく同じようにスタイル設定されます<textarea>。次に、キャレットまでの textarea のテキストが div にコピーされ、その<span>直後に a が挿入されます。次に、偽の div での折り返しを忠実に再現するために、スパンのテキスト コンテンツが textarea の残りのテキストに設定されます。

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

于 2014-03-17T04:00:08.587 に答える
0

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

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

  • 特定の位置にある通常の挿入カーソル
  • 特定の境界領域を持つテキスト選択
  • 非アクティブ: テキストエリアにフォーカスがありません。未使用です。

IE モデルはオブジェクトdocument.selectionを使用します。これから、選択範囲へのアクセスとカーソル位置へのアクセスを提供するTextRangeオブジェクトを取得できます。

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

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

入力フィールドにフォーカスがない場合は、どちらも設定されていないことがあります。現在のカーソル位置にテキストを挿入し、存在する場合は現在の選択を置き換える次のコードでうまくいきました。正確なブラウザによっては、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

于 2008-08-27T11:50:06.080 に答える