web-dev-qa-db-ja.com

ユーザーがテキストボックスにテキストを貼り付けないようにする方法は？

ユーザーが文字を入力できないようにするこの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" />

しかし、ユーザーがこのテキストボックスからWordを貼り付けようとしたときに、テキストを入力できることに気付きました。ペーストを無効にせずにこれを防ぐにはどうすればよいですか？

javascripthtmlvalidation
22
PeterS

非常に簡単な解決策：

<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を押すと、誰もテキストボックスにペーストできなくなります。

38
arefin2k

//貼り付け機能を無効にするには

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

//以下のいずれかが機能に役立つ場合があります。

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

または

OnTabOut()またはonblur()を使用すると、貼り付け機能を処理する代わりに、入力/貼り付けされたテキストを検証できます。

24
Mallikarjuna Reddy

Angularプロジェクトでこれを試してみましたが、jQueryがなくても正常に機能しました。

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

そして、スクリプト部分で：

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

Non angularプロジェクトでは、「ng-paste」の代わりに「onPaste」を使用し、「$ event」の代わりに「event」を使用します。

5
Abhishek

編集できない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

1
Chtiwi Malek