如何防止用户在文本框中粘贴文本？

Posted 2023-04-18

【中文标题】如何防止用户在文本框中粘贴文本？

【英文标题】：How to prevent user pasting text in a textbox?

【发布时间】：2013-02-25 12:52:40

【问题描述】：

我有这个 JS 函数可以防止用户输入字符

<script type="text/javascript">
function validate(evt) 
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if(!regex.test(key)) 
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  

</script>

<span>Radio Receive:</span>
<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="$cpCon.receiveNo" required tabindex="34" />

但我注意到当用户试图从这个文本框中粘贴一个单词时，可以输入该文本。如何在不禁用粘贴的情况下防止这种情况发生？

【问题讨论】：

<input readonly> 或 inputElement.readonly = true?

查看onkeydown 事件以阻止控制字符。

检查这个类似的问题.. ***.com/questions/5510129/…的可能重复

【参考方案1】：

非常简单的解决方案：

<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="$cpCon.receiveNo" required tabindex="34" onCopy="return false" onDrag="return false" onDrop="return false" onPaste="return false" autocomplete=off />

这对我很有效。现在没有人可以使用鼠标右键粘贴选项或从键盘按 ctrl+v 粘贴到您的文本框中。

【讨论】：

太棒了。我无法直接添加 onPaste，所以必须使用 JavaScript 添加它： $("#stopPaste").attr("onPaste", "return false");这似乎可以解决问题

如果一个人有少量的专有技术（开发工具 -> 删除节点 -> 重新创建节点），这些技术都很容易绕过，所以不要依赖它们来工作。

2020 年了，onPaste="return false" 仍然有效，YEAH BABY！！

这至少不会阻止在 Firefox/Linux 上粘贴。使用 event.preventDefault() 确实有效。

为什么不只是一个简单的 onPaste="return false"？

【参考方案2】：

// 禁用粘贴功能

$(document).ready(function()
  $('#txtInput').bind("paste",function(e) 
      e.preventDefault();
  );
);

//Below One 可能对您的功能有所帮助。

$(document).ready(function()
  $('#txtInput').bind("paste",function(e) 
    validate(e);
  );
);

或

OnTabOut() 或 onblur() 您可以验证输入/粘贴的文本，而不是处理粘贴功能。

【讨论】：

如果我不想禁用粘贴选项怎么办？我只想阻止用户输入或粘贴字符。

尝试将您的验证（阻止字符）绑定到答案中的 II 大小写等选项。

对不起，但我不知道如何实现 JS 功能...我尝试了您的第二个选项，它可以禁用粘贴选项...但我不想禁用这个...我只想防止我的文本框中出现字符

OnTabOut() 不再存在，因为它在我相信 2015 年被弃用...

【参考方案3】：

我在我的 Angular 项目中尝试过，没有 jQuery 也能正常工作。

<input type='text' ng-paste='preventPaste($event)'>

在脚本部分：

$scope.preventPaste = function(e)
   e.preventDefault();
   return false;
;

在非 Angular 项目中，使用 'onPaste' 代替 'ng-paste' 和 'event' 代替 '$event'。

【参考方案4】：

如果你只需要不可编辑的 kendoComboBox()，你可以使用 kendoDropDownList() 代替。

在我的情况下，我需要根据用户权限启用/禁用它， 所以这是我想出的解决方案（这可以防止键输入和粘贴值）：

if (user.hasRight()) 

  var myinput = $("#myinput").data("kendoComboBox");
  myinput.input.on("keydown", function (e)  e.preventDefault(); );
  myinput.input.bind("paste", function (e)  e.preventDefault(); );

你可以测试一下here

【参考方案5】：

VanillaJS 解决方案

function pasteNotAllowFunc(xid)
 let myInput = document.getElementById(xid);
     myInput.onpaste = (e) => e.preventDefault();
 

pasteNotAllowFunc('pasteInput')

Paste
<input id="pasteInput" value="paste not allow"/>
<hr/>
Textarea
<textarea id="test" value="Copy me and try to paste"></textarea>

【参考方案6】：

jQuery:

    $(this).click(function () 
    $(".txtbox").attr("disabled", "disabled"); 

  );

或css：

.txtbox
 display: none;
 visibility: hidden;
 

或html属性：

 set disabled="disabled";

【讨论】：

如果你使用这个，用户将无法在文本框中输入