Question

我正在尝试感知网页内的粘贴事件（粘贴位置无关紧要，我还需要在输入字段之外进行拦截，因此我将事件设置为BODY）

这是在此处找到的代码。我对其进行了修改，以将粘贴的内容放入变量c中以用于其他目的，但我不知道如何，结果始终为空。

我该如何解决？或者...是否有一个jquery插件与所有浏览器更好地兼容？

$('body').on('paste', function(e) {
  var c = "";
  var dt = e.originalEvent.clipboardData;

  if (dt && dt.items && dt.items[0]) {
    dt.items[0].getAsString(function(text) {
      $('.log').text(text);
      c = text;
    });
  } else {
    if (dt && ('getData' in dt)) {
      $('.log').text(dt.getData('text'));
      c = dt.getData('text');
    }
  }

  console.log(c); //<-- always empty

  // do some stuff with my "c" variable
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Pasted text: <span class="log"></span>
</p>

脚本：http://jsfiddle.net/6n10y0ds/9/

Answer 1

问题是因为getAsString()是异步的，因此您正在尝试在设置值之前读取c。

要解决此问题，请将依赖于c的逻辑提取到其自己的函数中，然后在getAsString()的回调中调用该函数：

$('body').on('paste', function(e) {
  var c = "";
  var dt = e.originalEvent.clipboardData;

  if (dt && dt.items && dt.items[0]) {
    dt.items[0].getAsString(function(text) {
      $('.log').text(text);
      doStuff(text);
    });
  } else {
    if (dt && ('getData' in dt)) {
      $('.log').text(dt.getData('text'));
      doStuff(dt.getData('text'));
    }
  }
});

function doStuff(foo) {
  console.log('You pasted', foo);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Pasted text: <span class="log"></span>
</p>

在jQuery中的变量内部拦截粘贴事件

1 个答案: