捕获文本框中已粘贴的输入内容

Question

使用JavaScript（JQuery）。

在网上搜索，似乎不可能。到目前为止我有这样的代码：

$("#textAreaId").bind('paste', function (e) {
        alert('pasting text!!!!');

        var data = $("#taData").val();

        alert(data);



    });

但是在这个阶段数据为空...有没有办法在粘贴后捕获输入的内容呢？似乎应该有一种方法。

当发生粘贴时，Jquery中的keyup事件不会被触发。

有什么想法吗？

- sarsnake

Answer 1

这是我决定要做的事情。请注意，我只需要获取粘贴的内容。

$(document).ready(function () {         

    $("#taData").bind('paste', function (e) {
        setTimeout(function () { DisplayPastedData(); }, 100);
    });    

});



function DisplayPastedData() {

    var data = $("#taData").val();
    alert('input pasted ' + data);


}

我已经任意选择了100毫秒的等待时间，这个时间可以很好地配合我所粘贴的最大数据。

- sarsnake

---

那么，如果用户将文本粘贴到已经包含文本的文本区域中会发生什么？ - Tim Down

根据我的要求，我不需要涵盖这个内容。粘贴将只发生一次，粘贴的输入将被解析并用于填充表格，每次后续的粘贴都会覆盖之前的内容。请参阅我的原始问题。当文本区域不为空时，没有任何关于涵盖粘贴的内容。 - sarsnake

好的。在这种情况下，我建议在获取数据后清空文本区域：function DisplayPastedData() { var $ta = $("#taData"); data = $ta.val(); alert('input pasted ' + data); $ta.val(""); } - Tim Down

Answer 2

并非所有浏览器都支持相同的复制/粘贴功能。以下是支持哪些功能的浏览器的图表：

http://www.quirksmode.org/dom/events/cutcopypaste.html

如果浏览器支持捕获复制/粘贴事件，则jQuery应该可以正常工作。建议测试每个目标浏览器。

另一种方法是使用jQuery的“data”属性来检测输入字段是否已更改。以下是带有示例代码的文章：

http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/

从文章中得知：

var formChanged = false;

$(document).ready(function() {
     $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) {
          $(this).data('initial_value', $(this).val());
     });

     $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
          if ($(this).val() != $(this).data('initial_value')) {
               handleFormChanged();
          }
     });

     $('#my_form .editable').bind('change paste', function() {
          handleFormChanged();
     });

     $('.navigation_link').bind("click", function () {
          return confirmNavigation();
     });
});

function handleFormChanged() {
     $('#save_or_update').attr("disabled", false);
     formChanged = true;
}

function confirmNavigation() {
     if (formChanged) {
          return confirm('Are you sure? Your changes will be lost!');
     } else {
          return true;
     }
}

- Stephen Moran

---

捕获事件是有效的，我想知道如何获取粘贴的文本。在IE中，可以使用clipboardData对象，但在FF中不可用。是的，上面的代码适用于IE和FF，所以捕获粘贴事件不是问题所在。 - sarsnake

那么换句话说，比较（或计时器）是唯一的选择？没有所谓的后粘贴事件吗？ - sarsnake

Answer 3

虽然这是一个比较老的帖子，但你现在可以使用FilteredPaste.js（http://willemmulder.github.com/FilteredPaste.js/）代替。它可以让你控制将什么内容粘贴到文本区域或可编辑内容中，并且你可以随意过滤、更改或提取内容。

- Willem Mulder