I have a html textbox on which I've bound a function via jQuery to the paste event to prevent users pasting a value into the textbox. This functionality works well.
However it is possible to select some text from another textbox on the page and drag it into the textbox in which pastes are prevented. Is there a jQuery event that I can bind to that will prevent users dragging text into the texbox?
First of all you shouldn't prevent the user from being able to copy and paste or click and drag from one input to another. Most people despise the confirm email input box, and I'm one of them. Making it harder to fill it in will only serve to irritate your users.
However... warning hack alert...
You cannot block the built in browser functionality, however you could disable the text from being selected in the inputs you don't want to be dragged like follows:
OPTION 1:
$(document).ready(function () {
// Get the control from which the drag should be disallowed
var originator = $(".start");
// Disable text selection
if ($.browser.mozilla) {
originator.each(function () { $(this).css({ 'MozUserSelect': 'none' }); });
}
else if ($.browser.msie) {
originator.each(function () { $(this).bind('selectstart.disableTextSelect',
function () { return false; }); });
}
else {
originator.each(function () { $(this).bind('mousedown.disableTextSelect',
function () { return false; }); });
}
});
But, this would be REALLY annoying.
OPTION 2:
You could disable the confirmation box when the user is dragging an item:
$(document).ready(function () {
// Get the control which dropping should be disallowed
var originator = $("#emailBox");
// Trap when the mouse is up/down
originator.mousedown(function (e) {
$("#confirmationBox").attr('disabled', 'disabled');
});
originator.mouseup(function (e) {
$("#confirmationBox").attr('disabled', '');
});
});
OPTION 3:
Do your user-base a favour and get rid of the confirmation box.
In my case, based on @Prateek's answer I did something in jquery: I've added to some specific text inputs the following attribute: ondrop="return false;"...
My code was:
// Prevents to drag and drop from text input fields.
$("#MyInput").attr("ondrop","return false;");
After adding this, it is working perfectly.
Hope this can help others.
Add ondrop="return false;" to those input elements where you want to disable dropping text.
input {
-webkit-user-select: auto;
user-select: auto;
-webkit-user-drag: none;
}<article>
<input type="text" placeholder="Write text, select it, and drag" >
<input type="text" placeholder="Then drop text here" ondrop="return false;">
</article>
Two solutions
1 You can phrase the issue in this way: You want the user to use the keyboard for inputting the value. You could count the number of keystrokes. Then, on the change event, when the input looses focus you should have the number of keystrokes at least equal to the number of the characters in the value.
2 You can use a interval function to frequently check differences in the value of the input. If a difference consists in too many characters all of a sudden, dismiss the change because it can only be due to text pasting. It is up to you to decide on a frequency and on a maximum number of keystrokes considered humanly achievable in that time frame.
Unfortunately, this is not possible.
