0

When I drag and drop the image into the textarea, the text is highlighted.
Is there a way to have the textarea's cursor move to the end of the highlighted text?

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>
Alireza Sabahi
  • 647
  • 1
  • 12
  • 35
gretagremlin
  • 33
  • 4
  • 1
    https://stackoverflow.com/questions/6562727/is-there-a-function-to-deselect-all-text-using-javascript – tscpp Nov 09 '19 at 07:45
  • The linked solutions still show the text in the textarea remaining highlighted after the drop. – gretagremlin Nov 09 '19 at 08:39
  • Does this answer your question? [How to disable text selection highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) – Chris Nov 09 '19 at 12:53

1 Answers1

1

i added a "dragEnd" event to move the cursor to the end of the highlighted text. Hope it helps :) 

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>
Mehdi Ayari
  • 478
  • 5
  • 13