獲得輸入要素焦點的克拉位置

Question

當用戶在填充的輸入框內單擊時，我想獲取當前的光標位置。但是，使用this.selectionStart;只給出了「0」使用下面的代碼：

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

的Html

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

我的猜測是，它給人的值0，因爲之前的光標位置會在設定的.on(focus)代碼運行輸入框。

是否有任何其他事件可用於輸入元素激活？

例如：輸入框都有價值：「這是一個預填充值」

用戶點擊「預|裝」所以我想會出現光標之後的字符數。有沒有辦法得到這個？

Answer 1

你的邏輯是正確的。但是，事件偵聽器中的this上下文不是您的輸入元素。我建議或者通過event.target（在這種情況下，您必須將event參數添加到您的事件偵聽器中）將變量的引用保存到變量中（如果您事先知道ID）或訪問元素。

一個非常基本的工作示例（請檢查您的輸出或控制檯此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">