jQuery如何获取粘贴的内容 [英] jquery how to get the pasted content

问题描述

在将粘贴的文本捕获到输入中时，我遇到了一些麻烦:

I have a little trouble catching a pasted text into my input:

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });  

console.log显示:

console.log shows:

default

我如何catch粘贴文本并准备使用?

How I catch the pasted text and get ready to use?

推荐答案

由于在更新输入值之前触发了paste事件，因此解决方案之一是:

Because the paste event is triggered before the inputs value is updated, the solution is to either:

1. 而是从剪贴板中捕获数据，因为剪贴板中的数据肯定与在该确切时刻粘贴到输入中的数据相同.

1. Capture the data from the clipboard instead, as the clipboards data will surely be the same as the data being pasted into the input at that exact moment.

等待，直到使用计时器更新值

Wait until the value has updated using a timer

幸运的是，在发布原始答案数年之后，大多数现代浏览器现在都支持出色的

Luckily, years after the original answer was posted, most modern browsers now support the fantastic Clipboard API, a much more elegant solution to capturing data from the clipboard.

对于不支持剪贴板API的浏览器，如果我们检查浏览器支持哪个版本(如果有的话)，我们可能会退回到不可靠的event.clipboardData.

For browsers that don't support the Clipboard API, we could fall back to the unreliable event.clipboardData if we do some checking as to which version, if any, is supported in the browser.

作为最后的回退，使用计时器来延迟直到更新输入值，该方法将在所有浏览器中都可以使用，这使其成为真正的跨浏览器解决方案.

As a final fallback, using a timer to delay until the inputs value is updated, will work in all browsers, making this a truly cross-browser solution.

我做了一个方便的功能来处理所有事情

I've made a convenient function that handles everything

function catchPaste(evt, elem, callback) {
  if (navigator.clipboard && navigator.clipboard.readText) {
    // modern approach with Clipboard API
    navigator.clipboard.readText().then(callback);
  } else if (evt.originalEvent && evt.originalEvent.clipboardData) {
    // OriginalEvent is a property from jQuery, normalizing the event object
    callback(evt.originalEvent.clipboardData.getData('text'));
  } else if (evt.clipboardData) {
    // used in some browsers for clipboardData
    callback(evt.clipboardData.getData('text/plain'));
  } else if (window.clipboardData) {
    // Older clipboardData version for Internet Explorer only
    callback(window.clipboardData.getData('Text'));
  } else {
    // Last resort fallback, using a timer
    setTimeout(function() {
      callback(elem.value)
    }, 100);
  }
}

// to be used as 

$('#myid').on('paste', function(evt) {
  catchPaste(evt, this, function(clipData) {
    console.log(clipData);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myid" />

请注意，从剪贴板中获取数据只会获取粘贴的文本，而等待输入值更新是上面唯一实际获取输入的全部值(包括新粘贴的文本)的解决方案.

Note that getting the data from the clipboard only gets you the pasted text, while waiting for the inputs value to update is the only solution above that actually gets the entire value of the input, including the newly pasted text.

这篇关于jQuery如何获取粘贴的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！