我有一个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:
为您的用户群提供帮助并摆脱确认框。
将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您可以使用间隔功能来频繁检查输入值的差异。如果差异突然包含太多字符,则忽略该更改,因为它只能归因于文本粘贴。您需要决定在该时间范围内人们可以实现的频率和最大击键次数。
在我的例子中,根据@ Prateek的回答,我在jquery中做了一些事情:我在一些特定的文本输入中添加了以下属性:ondrop =“return false;”...
我的代码是:
// Prevents to drag and drop from text input fields.
$("#MyInput").attr("ondrop","return false;");
添加它之后,它工作得很好。
希望这可以帮助别人。
不幸的是,这是不可能的。