如何讓 textarea 的 cursor 在拖放時移動到突出顯示的文本的末尾？

Question

當我將圖像拖放到文本區域時，文本會突出顯示。
有沒有辦法讓 textarea 的 cursor 移動到突出顯示的文本的末尾？

 document.querySelectorAll('.emoteImage').forEach((emoteImage) => { emoteImage.addEventListener('dragstart', (event) => { event.dataTransfer.setData('text', emoteImage.alt); event.effectAllowed = "copy"; }); });

 img { width: 100px; }

 <div class="emote"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote1" class="emoteImage"> </div> <textarea></textarea>

Answer 1

我添加了一個“dragEnd”事件將 cursor 移動到突出顯示的文本的末尾。 希望能幫助到你：）

 var element = document.getElementById("textArea"); document.querySelectorAll('.emoteImage').forEach((emoteImage) => { emoteImage.addEventListener('dragstart', (event) => { event.dataTransfer.setData('text', emoteImage.alt); event.effectAllowed = "copy"; }); emoteImage.addEventListener( 'dragend', function( event ) { var end = element.selectionEnd; element.focus(); element.setSelectionRange(end,end); }); });

 img { width: 100px; }

 <div class="emote"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote1" class="emoteImage"> </div> <textarea id="textArea" ></textarea>