When I use chrome, any selected text in an input or a text box can be dragged and dropped into another input/textarea. Is there any way to disable dragging of selected text?

When I use chrome, any selected text in an input or a text box can be dragged and dropped into another input/textarea. Is there any way to disable dragging of selected text?

• javascript
• jquery
• css
• google-chrome

• Possible duplicate of Disable Drag and Drop on HTML elements? – tylerwgrass Commented Feb 5, 2018 at 23:49
• 1 Do you want to allow your users to select the text in the first place? It might be easier to prevent selection, rather than explicit actions. Though in either case I have to wonder, if only rhetorically, why you appear to hate your users in this way? – David Thomas Commented Feb 6, 2018 at 0:10
• @DavidThomas Just curious why you would make the presumption that she hates her users? Perhaps it's a user requirement. Not all the time, but I typically focus on the how rather than the why of the OP's question. – user9263373 Commented Feb 6, 2018 at 0:20
• 1 @user9263373: "I...wonder, if only rhetorically..." I don't assume that the OP genuinely hates her users, I use that as - quite literally - a rhetorical device to express my own frustrations, as a user, with such intrusions into the way I use a website. While I do think of the how something may be acplished (and have nothing to add that isn't already covered in the existing answers), asking why often yields a better understanding of what is required, which informs the how in order to provide a better answer for the OP. – David Thomas Commented Feb 6, 2018 at 0:25
• @DavidThomas I did realize your question was rhetorical and your response to me is a perfectly valid answer. I guess my initial reaction felt your wording was somewhat off-putting when I initially read it. – user9263373 Commented Feb 6, 2018 at 0:40

2 Answers 2

document.getElementById("test").addEventListener("dragstart", function(evt){
  evt.preventDefault();
});

<input id="test" type="text" value="Drag text into textarea">
<br>
<textarea></textarea>

Bind the cut, copy and paste events to the <input> box and prevent default actions.

Update

I also bound dragstart to #Textbox1 and now this also prevents dragging text from this input into another input. I verified this using Chrome.

$(document).ready(function() {
  $('#TextBox1').on('copy paste cut dragstart',function(e) { 
    e.preventDefault(); //disable cut,copy,paste
    console.log('cut,copy & paste options are disabled !!');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="TextBox1" placeholder="Can't cut this!" /><br />
<input type="text" id="TextBox2" />