如何在處理拖放事件時定位遊標索引？

Question

出於某種原因，myTextArea.selectionStart在我處理pasteEvent時工作得很好，但是當我處理drop事件時，它是錯誤的。如何將放置事件的目標光標位置置於文本區域中？例如，我想知道用戶是在textarea的內容開始還是結束時拖放一些文本。我們假設文本區域的值不能被改變（就像例子中那樣）。爲了方便起見，我在我的例子中使用了jQuery;這不是問題的一部分。

編輯：可能不清楚。如果您運行的代碼段（側重於文本區域前），拖放文本在文本區域的末尾，它報告的下降位置爲0，而不是預期的18

$('#x').on('drop', function(event){ 
 
    $('#y').html(event.target.selectionStart); 
 
    return false; 
 
}); 
 

 
$('#x').on('paste', function(event){ 
 
    $('#z').html(event.target.selectionStart); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Try drag/dropping this text before and after existing text, then try with copy/paste</div> 
 
<textarea id="x">some existing text</textarea> 
 
<div>The drop position was <span id="y"></span></div> 
 
<div>The paste position was <span id="z"></span></div>

Answer 1

我今天晚上有點想法，如何破解你的問題。我目前的解決方案如下：

您正在取消拖放事件，但我讓它們發生。之後，我計算舊字符串和新字符串的差異，並以此，您可以獲得更改的位置:)

適用於您的案例。

let drop_event = 'drop'; 
 
let paste_event = 'paste'; 
 
let events = [drop_event, paste_event]; 
 
var old_val = $('#x').val(); 
 
var current_event = ''; 
 
var cursor_pos = 0; 
 
var sel_len = 0; 
 

 
// iterate through each event 
 
$.each(events, function(key, value) { 
 
    $('#x').on(value, function(event){ 
 
    // saving old value and the current event 
 
    old_value = $('#x').val(); 
 
    current_event = value; 
 
    }); 
 
}); 
 

 

 
$('#x').on('input', function(event){ 
 
    // position, where the string change starts 
 
    cursor_pos = event.target.selectionStart; 
 
    if (current_event == drop_event){ 
 
    // drop events are eays 
 
    $('#y').html(cursor_pos); 
 
    } else { 
 
    // substract the length of change 
 
    $('#z').html(cursor_pos - diff_string($('#x').val(), old_val)); 
 
    } 
 
    // set old string value 
 
    $('#x').val(old_val); 
 
}); 
 

 
/* 
 
* Calculates the difference between two strings, 
 
* iff one string is substring of the other string 
 
* @param a first string 
 
* @param b second string 
 
* @return differnce as int 
 
*/ 
 
function diff_string(a, b){ 
 
    var len = a.length > b.length ? b.length : a.length; 
 
    var index = 0; 
 
    while (a.charAt(index) == b.charAt(index)) 
 
    index += 1; 
 
    a = a.substr(index); 
 
    b = b.substr(index); 
 
    var diff = a.length > b.length ? a.indexOf(b) : b.indexOf(a); 
 
    diff = diff == 0 ? a.length + b.length : diff; 
 
    return diff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Try drag/dropping this text before and after existing text, then try with copy/paste</div> 
 
<textarea id="x">123456789 some existing text</textarea> 
 
<div>The drop position was <span id="y"></span></div> 
 
<div>The paste position was <span id="z"></span></div>