Shirley Rozenboim
Shirley Rozenboim

Reputation: 309

Disable drag and drop 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?

Upvotes: 2

Views: 6025

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

document.getElementById("test").addEventListener("dragstart", function(evt){
  evt.preventDefault();
});
<input id="test" type="text" value="Drag text into textarea">
<br>
<textarea></textarea>

Upvotes: 7

user9263373
user9263373

Reputation: 1074

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.com/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" />

Upvotes: 1

Related Questions