目に見えないフェイク要素の使用
これは、入力テキスト ボックスと同じ CSS プロパティ (フォント、左ボーダー、左パディング)を持つ完全に配置された非表示 ( visibility
notを使用) の偽要素を使用することで実現できます。display
この非常に短くて理解しやすい JSFiddleは、このスクリプトがどのように機能するかの出発点です。
Chrome と Firefox でそのまま動作します。また、 IE9 +でも動作するはずです。
Internet Explorer 8 (およびそれ以前) では、入力テキスト ボックス内のテキストの先頭からキャレット位置を取得するために、追加のコードが必要になります。上部にメーターを追加して、10 ピクセルごとに線を表示し、正しく測定されているかどうかを確認できるようにしました。線は 1、11、21、... ピクセルの位置にあることに注意してください。
この例では、実際にテキスト ボックス内のすべてのテキストをキャレット位置まで取得し、偽の要素内に配置してから、その幅をピクセル単位で測定します。これにより、テキスト ボックスの左からのオフセットが得られます。
テキストを偽の要素にコピーすると、通常のスペースも改行されていないスペースに置き換えられるため、スペースの直後にキャレットを配置すると、間違った位置になる場合に実際にレンダリングされます。
var faux = $("#faux");
$("#test").on("keyup click focus", function(evt) {
// get caret offset from start
var off = this.selectionStart;
// replace spaces with non-breaking space
faux.text(this.value.substring(0, off).replace(/\s/g, "\u00a0"));
});
偽物の正しい寸法に注意してください
正しい値を取得するために削除されました。そうしないと、要素が広すぎます。要素のボックスは、含まれるテキストの直後で終了する必要があります。
入力ボックスの先頭からのピクセル単位のキャレットの位置は、次から簡単に取得できます。
faux.outerWidth();
問題
ただし、問題が 1 つあります。テキストボックス内のテキストがスクロールされ(長すぎる場合)、キャレットがテキストの最後ではなく、その間のどこかにある場合の状況を処理する方法がわかりません...最後にある場合、キャレットの位置は常に可能な最大位置 (入力幅から右側の寸法 - パディング、ボーダー、マージン) を差し引いたもの)。
テキスト ボックス内のテキスト スクロール位置を取得できるかどうかはわかりません。できれば、この問題も解決できます。しかし、私はこれに対する解決策を知りません...
お役に立てれば。