Question

我正在尝试这个简单的代码。我想要的是，当在第二个输入文本框上触发paste事件时，应该在复制其内容后删除它，删除前一个文本框的readonly属性，然后将其粘贴到那里。然而，一切都没有发生。

paste事件被激活，因为如果我用简单的alert替换计时器中的代码，它就可以了。谁能告诉我这里有什么问题？

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
       $(document).ready(function(){
         $(".boo").bind("input paste",function() { 
         elem = this;
         setTimeout(function() { 
             $(".foo").removeAttr("readonly");
             $(".foo").text($(elem).text());
             $(elem).text("");  
         },100);
        });
      });
  </script>
</head>
 <body>
   <input class = 'foo' type = 'text' /><input class = 'boo' type = 'text' />
 </body>
</html>

Answer 1

首先，您应该使用.val()代替.text()来控制输入。

$(document).ready(function () {

    $("input.boo").bind("paste", function () { //also changed the binding too
        var elem = $(this);
        setTimeout(function () {
            $(".foo").val(elem.val());
            elem.val("");
        }, 100);
    });

});

此外，当文本粘贴到控件中时，您的绑定事件被触发两次。那是因为，您已将input和paste事件绑定到具有“boo”类的元素。

所以在这里，而不是：

$(".boo").bind("input paste", function() {});

使用此：

$("input.boo").bind("paste", function() {});

这只会将paste事件绑定到带有“boo”类的输入元素。

请参阅已更新 jsFiddle example。

粘贴事件无法按预期工作

1 个答案: