查找插入點當前放置在textarea/contenteditable中的位置是

Question

我目前正在嘗試創建動態文本區域，儘管我面臨的問題是某些區域必須阻止事件實現，而我已經得出結論，我需要找出插入點位於當前textarea或contenteditable divider中的位置。

我用的事件​​和jQuery的keyup但當點擊上分隔做他們不登錄，我不知道要尋找什麼在event對象找到我後，我。

例如，如果我在一個空的textarea並點擊textarea，它將返回0，因爲它在開頭 - 如果我要寫文本，它會返回數字，因爲更多的字符被插入到textarea的。

Answer 1

您可以使用textarea的selectionStart和selectionEnd屬性。對於contenteditable元素，您可以使用window.getSelection()。

$('#text1').on('keyup click', function() { 
 
    console.log('Selection start :', $(this).prop('selectionStart')); 
 
    console.log('Selection end :', $(this).prop('selectionEnd')); 
 
}); 
 

 
$('#text2').on('keyup click', function() { 
 
    console.log(window.getSelection().getRangeAt(0).startOffset); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="text1"></textarea> 
 
<div id="text2" contenteditable>some text</div>