Javascript中的拦截粘贴事件

Question

有没有办法在JavaScript中拦截粘贴事件并获取原始值，对其进行更改并将关联的DOM元素的值设置为修改后的值？例如，我有一个用户试图复制并粘贴带空格的字符串，并且字符串的长度超过了我的文本框的最大长度。我想截取文本，删除空格，然后使用更改值设置文本框的值。这可能吗？

Answer 1

您可以通过附加“ onpaste”处理程序来拦截粘贴事件，并通过window.clipboardData.getData('Text')在IE中使用“ ”或event.clipboardData.getData('text/plain')在其他浏览器中使用“ ” 来获取粘贴的文本。

例如：

var myElement = document.getElementById('pasteElement');

myElement.onpaste = function(e) {

  var pastedText = undefined;

  if (window.clipboardData && window.clipboardData.getData) { // IE

    pastedText = window.clipboardData.getData('Text');

  } else if (e.clipboardData && e.clipboardData.getData) {

    pastedText = e.clipboardData.getData('text/plain');

  }

  alert(pastedText); // Process and handle text...

  return false; // Prevent the default handler from running.

};

如@pimvdb所述，e.originalEvent.clipboardData如果使用jQuery ，则需要使用“ ”。

Answer 2

我需要对粘贴的内容执行“修剪”操作（删除所有前导和尾随空格），同时仍然允许使用空格键。

对于Ctrl + V，Shift + Insert和鼠标右键单击“粘贴”，这是我发现自2017年4月22日起在FF，IE11和Chrome中起作用的内容：

$(document).ready(function() {

    var lastKeyCode = 0;

    $('input[type="text"]').bind('keydown', function(e) {

        lastKeyCode = e.keyCode;

    });

    // Bind on the input having changed.  As long as the previous character

    // was not a space, BS or Del, trim the input.

    $('input[type="text"]').bind('input', function(e) {

        if(lastKeyCode != 32 && lastKeyCode != 8 && lastKeyCode != 46) {

            $(this).val($(this).val().replace(/^\s+|\s+$/g, ''));

        }

    });

});

两个警告：

如果粘贴时已经有文本，则会在整个结果上进行修剪，而不仅仅是粘贴内容。

如果用户键入空格或BS或Del，然后粘贴，则不会进行修剪。