【问题标题】:Disable Copy or Paste action for text box?禁用文本框的复制或粘贴操作?
【发布时间】:2014-08-16 22:24:59
【问题描述】:

我有两个文本框,我想阻止用户从第一个(电子邮件)文本框中复制值并将其粘贴到第二个(确认电子邮件)文本框中。

Email: <input type="textbox" id="email"><br/>
Confirm Email:    <input type="textbox" id="confirmEmail">

我有两个解决方案:

  1. 阻止电子邮件文本框中的复制操作,或
  2. 阻止来自 confirmEmail 文本框的粘贴操作。

你知道怎么做吗?

http://jsfiddle.net/S22ew/

【问题讨论】:

  • 请不要这样做...我发现必须输入我的电子邮件地址两次是非常糟糕的用户体验,这让我想尽快离开网站。没有什么能阻止我两次犯同样的错误。
  • 它将帮助您禁用剪切、复制、粘贴操作 - kvcodes.com/2014/03/…
  • 我太讨厌“确认电子邮件”字段 - 糟糕的用户体验 :(
  • 更糟糕的是,我必须输入银行信息等长帐号。您可以安全地从银行复制您的帐号并将其粘贴到一个字段中,而不必担心会乱用任何东西,但是如果您强迫某人自己输入它,则可能会出错。不要这样做。这很傻。我讨厌这样做的网站。

标签: javascript jquery


【解决方案1】:

检查this fiddle

 $('#email').bind("cut copy paste",function(e) {
     e.preventDefault();
 });

你需要绑定在剪切、复制和粘贴上应该做的事情。您阻止该操作的默认行为。

你可以找到a detailed explanation here

【讨论】:

  • 不错。如果用户在加载时遇到问题,那么将其包装为“文档就绪处理程序”可能会有所帮助。即 jQuery(function ($) { });参考:stackoverflow.com/questions/19373455/…
  • 现在应该使用 .on()
【解决方案2】:

使用

oncopy="return false"onpaste="return false"

Email: <input type="textbox" id="email" oncopy="return false" onpaste="return false" ><br/>
Confirm Email:    <input type="textbox" id="confirmEmail" oncopy="return false" onpaste="return false">

http://jsfiddle.net/S22ew/4/

【讨论】:

    【解决方案3】:

    前:

    <input type="textbox" ondrop="return false;" onpaste="return false;">
    

    在 HTML 的必需文本框中使用这些属性。现在拖放和粘贴功能已禁用。

    【讨论】:

    • 你给他们的一段可爱的代码。其余的不工作
    【解决方案4】:

    这是更新后的fiddle

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

    这将防止在确认电子邮件文本框中剪切复制粘贴。

    希望对你有帮助。

    【讨论】:

      【解决方案5】:

      试试这个

       $( "#email,#confirmEmail " ).on( "copy cut paste drop", function() {
                      return false;
              });
      

      【讨论】:

      【解决方案6】:

      你可以试试这个:

         <input type="textbox" id="confirmEmail" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">
      

      【讨论】:

        【解决方案7】:

        更新:接受的答案提供了解决方案,但 .on() 是从现在开始应该使用的方法。

        “从 jQuery 3.0 开始,.bind() 已被弃用。自 jQuery 1.7 起,它已被用于将事件处理程序附加到文档的 .on() 方法取代,因此不鼓励使用它。”

        http://api.jquery.com/bind/

        【讨论】:

          【解决方案8】:

          执行此操作的最佳方法是向要避免剪切、复制和粘贴的字段(文本框)添加数据属性。

          只需为其创建一个方法,如下所示:-

          function ignorePaste() {
          
          $("[data-ignorepaste]").bind("cut copy paste", function (e) {
                      e.preventDefault(); //prevent the default behaviour 
                  });
          
          };
          

          然后,当您添加上述代码时,只需将数据属性添加到您要忽略剪切复制粘贴的字段。在我们的例子中,您添加一个数据属性来确认电子邮件文本框,如下所示:-

          Confirm Email: <input type="textbox" id= "confirmEmail" data-ignorepaste=""/>
          

          调用方法ignorePaste()

          因此,通过这种方式,您将能够在整个应用程序中使用它,您只需在要忽略剪切复制粘贴的地方添加数据属性

          https://jsfiddle.net/0ac6pkbf/21/

          【讨论】:

            【解决方案9】:

            您可能还需要向您的用户提供警告,表明这些功能已对文本输入字段禁用。这将起作用

            				function showError(){
            					alert('you are not allowed to cut,copy or paste here');
            				}
            				
            				$('.form-control').bind("cut copy paste",function(e) {
            					e.preventDefault();
            				});
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <textarea class="form-control"  oncopy="showError()" onpaste="showError()"></textarea>

            【讨论】:

              【解决方案10】:

              参见this 示例。您需要绑定事件密钥传播

              $(document).ready(function () {
                  $('#confirmEmail').keydown(function (e) {
                      if (e.ctrlKey && (e.keyCode == 88 || e.keyCode == 67 || e.keyCode == 86)) {
                          return false;
                      }
                  });
              });
              

              【讨论】:

              • 它只是禁用,Control + C,Control + V从键盘,您可以右键单击并使用鼠标复制并粘贴内容
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2013-07-16
              • 1970-01-01
              • 2018-10-26
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多