我有一个 html 文本框,我通过 jQuery 将函数绑定到粘贴事件,以防止用户将值粘贴到文本框中。此功能运行良好。
但是,可以从页面上的另一个文本框中选择一些文本并将其拖到阻止粘贴的文本框中。是否有一个我可以绑定的 jQuery 事件来阻止用户将文本拖到 texbox 中?
我有一个 html 文本框,我通过 jQuery 将函数绑定到粘贴事件,以防止用户将值粘贴到文本框中。此功能运行良好。
但是,可以从页面上的另一个文本框中选择一些文本并将其拖到阻止粘贴的文本框中。是否有一个我可以绑定的 jQuery 事件来阻止用户将文本拖到 texbox 中?
首先,您不应该阻止用户能够复制和粘贴或单击并从一个输入拖动到另一个。大多数人都鄙视确认电子邮件输入框,而我就是其中之一。让它更难填写只会激怒你的用户。
但是...警告黑客警报...
您不能阻止内置的浏览器功能,但是您可以禁止在您不想被拖动的输入中选择文本,如下所示:
选项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; }); });
}
});
但是,这真的很烦人。
选项 2:
当用户拖动项目时,您可以禁用确认框:
$(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', '');
});
});
选项 3:
帮您的用户群一个忙,摆脱确认框。
就我而言,根据@Prateek 的回答,我在 jquery 中做了一些事情:我在一些特定的文本输入中添加了以下属性:ondrop="return false;"...
我的代码是:
// Prevents to drag and drop from text input fields.
$("#MyInput").attr("ondrop","return false;");
添加后,它工作得很好。
希望这可以帮助其他人。
添加ondrop="return false;"
到要禁用删除文本的那些输入元素。
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>
两种解决方案
1 您可以这样表述问题:您希望用户使用键盘输入值。您可以计算击键次数。然后,在更改事件上,当输入失去焦点时,您的击键次数应该至少等于值中的字符数。
2 您可以使用区间函数来经常检查输入值的差异。如果差异突然出现在太多字符中,请忽略更改,因为它只能是由于文本粘贴造成的。由您决定在该时间范围内人类可以实现的频率和最大击键次数。
不幸的是,这是不可能的。