入力のためのフォーカスにカラットの位置を取得

Question

ユーザーが入力した入力ボックスをクリックすると、現在のカーソルの位置を取得します。

<div class="exampleDiv" style="width=300px;"><input value="This is a prefilled value"></div> 

私の推測では、カーソル位置がセットされる前に、.on(focus)コードが実行されるため、それは値0を与えることである

$('.exampleDiv').on('focus', 'input', function() { 
     console.log(this.selectionStart); 
}); 

HTML：しかしthis.selectionStart;を使用することでのみ、次のコードを使用して「0」与えます入力ボックス。

入力エレメントの有効化に使用できる他のイベントはありますか？

例：入力ボックスに値を持っている：「これはプレフィルド値である」上

ユーザーがクリック「前を|満たした」私は、カーソルが表示された後の文字数を取得したいです。これを得る方法はありますか？

Answer 1

あなたのロジックは正しいです。ただし、イベントリスナー内のthisコンテキストが入力要素ではありません。変数に要素への参照を保存するか（事前にIDを知っている場合）、または要素にevent.targetでアクセスすることをお勧めします（その場合は、イベントリスナーにeventパラメータを追加する必要があります）。

A非常に基本的な作業例（出力またはこれfiddleのためにあなたのコンソールを確認してください）：

var input = document.getElementById('foo'); 
 

 
function caretController() { 
 
    var caretPos = input.selectionStart; 
 

 
    console.log('caret position:', caretPos); 
 
} 
 

 
input.addEventListener('focus', caretController);

<input id="foo" type="text">

そしてevent.targetと：

function caretController(event) { 
 
    var caretPos = event.target.selectionStart; 
 

 
    console.log('caret position:', caretPos); 
 
} 
 

 
document.getElementsByTagName('input')[0].addEventListener('focus', caretController);

<input type="text">