为什么 jQuery 中的粘贴事件会在预粘贴时触发？答案

【问题标题】：Why Paste Event in jQuery fires on pre-paste?为什么 jQuery 中的粘贴事件会在预粘贴时触发？
【发布时间】：2012-01-23 09:16:22
【问题描述】：

我正在尝试制作类似于 Twitter 的文本框，为此我编写了以下代码：

字数
使用的事件更改、键入和粘贴

Keyup 和 Change 事件工作正常，但粘贴事件有点奇怪，当我在 textarea 中粘贴一些内容时，字数此时并没有改变，经过一些调试后我发现 paste 事件在文本框上粘贴内容之前启动。我不知道他们在 Twitter 上是如何处理的。

这是我的代码：
事件：

'click #textboxId'  : 'submitQuestion'
'keyup #textboxId'  : 'wordCounter'
'change #textboxId' : 'wordCounter'
'paste #textboxId'  : 'wordCounter'

wordCounter: ->  
  #Code for Word Count#

由于粘贴事件的预粘贴性质，该实例的工作计数不会改变。

您的建议和帮助将不胜感激。

【问题讨论】：

不改变所有这些事件句柄
@WebDeveloper 不，更改事件不会在粘贴时更新计数（立即），我们必须在粘贴某些内容后点击离开文本框。
@WebDeveloper - 问题是鼠标右键或工具栏粘贴。我真的很惊讶change 事件没有捕捉到这个。
该代码是什么语言的？它不是 JavaScript（包括 jQuery）——除非你删除了一堆花括号等等……在这种情况下，它不再是 JavaScript。无论如何，如果您收到“即将粘贴”事件，您可以添加setTimeout hack 以在几毫秒后更新字数。但一般来说，即使你让它与你正在测试的任何浏览器一起工作，有些浏览器根本不允许你处理粘贴事件。
@nnnnnn 它的主干.js 和咖啡脚本。好的，我将尝试 setTimeout 功能。谢谢。

标签： javascript jquery mouseevent jquery-events

【解决方案1】：

看这个例子。

http://jsfiddle.net/urEhK/1

$('textarea').bind('input propertychange', function() {
    $('#output').html($(this).val().length + ' characters');
});

这种行为很奇怪。你会认为其中一个事件会正确捕捉到这一点吗？我很惊讶没有通过 Google 提供更多答案。

【讨论】：

更改事件仅在您离开该字段时触发（Tab 键或单击它）。
@mrtsherman - 谢谢。我之前尝试过更改事件，是的，很奇怪，在粘贴到文本框后，计数只有在我点击框外时才会改变。实际上，当它不起作用时，发现粘贴事件可以处理此问题，但结果是相同的。无论如何，我将使用 Change 和 Keyup 事件再次尝试。再次感谢。

【解决方案2】：

   function update()    
   {
       alert($textbox.val().length);
   }


    var $textbox = $('input');
    $textbox.bind('keyup change cut paste', function(){
        update(); //code to count or do something else
    });
    // And this line is to catch the browser paste event
    $textbox.bind('input paste',function(e){ setTimeout( update, 250); });

【讨论】：

@WebDeveloper-coffeescript 中只有语法更改差异。谢谢。

【解决方案3】：

您现在应该使用 on() 而不是 bind() see this post。命名函数也不需要创建，创建匿名函数即可。

$('#pasteElement').on('paste', function() {
    setTimeout(function(){
        alert($('#pasteElement').val());
    }, 100);
});

【讨论】：

【解决方案4】：

你可以做一件事，首先获取原始数据。然后您可以获取事件粘贴数据并添加它们。

  $("#id").on("paste keypress ",function(event){
                // eg. you want to get last lenght
                 var length=$("#id").val().length;
                 if(event.type == "paste"){
                    //then you can get paste event data.=

length+=event.originalEvent.clipboardData.getData('text').length;
                }


            });`

【讨论】：

该代码最适合复制粘贴字数限制事件和限制字数。