jquery - 拦截jquery中变量内的粘贴事件

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>