jquery如何获取粘贴的内容

Question

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

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

console.log显示:

default

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

Answer 1

接受的答案实际上是hacky和丑陋,似乎经常建议stackoverflow上的粘贴事件.我认为更好的方式来做到这一点是这个

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});

Answer 2

现代浏览器现在支持该paste事件,该事件将在粘贴内容后触发

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);
  });
});

粘贴到输入时,event.clipboardData在值有更新时间之前触发事件.
解决此问题的一种方法是推迟获取值,直到输入有时间更新:

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

还有可能直接从剪贴板获取数据,而不是通过访问来获取输入值,paste但是这种技术是实验性的,并不是所有浏览器都支持,而且在我看来比使用event.clipboardData事件更麻烦,甚至是简单的超时.