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

Question

我有这个 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" />

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

Answer 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 粘贴到您的文本框中。

Answer 2

// 禁用粘贴功能

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

// 下面一个可能对您的功能有所帮助。

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

或者

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

Answer 3

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

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

在脚本部分：

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

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

Answer 4

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>

Answer 5

如果您只需要不可编辑的 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(); });

}

你可以在这里测试

Answer 6

jQuery：

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

  });

或CSS：

.txtbox{
 display: none;
 visibility: hidden;
 }

或 html 属性：

 set disabled="disabled";