拦截Javascript中的粘贴事件

Question

有没有办法拦截 JavaScript 中的粘贴事件并获取原始值，更改它，并将关联的 DOM 元素的值设置为修改后的值？

例如，我有一个用户尝试复制并粘贴一个包含空格的字符串，并且该字符串的长度超过了文本框的最大长度。我想截取文本，删除空格，然后用更改值设置文本框的值。

这可能吗？

Answer 1

您可以通过附加“onpaste”处理程序来拦截粘贴事件，并通过在 IE 中使用“window.clipboardData.getData('Text')”或“event.clipboardData.getData('Text')”获取粘贴的文本。 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 所指出的，如果使用 jQuery，则需要使用“e.originalEvent.clipboardData”。

Answer 2

碰巧，我回答了类似的问题 今天早些时候。简而言之，您需要一种技巧，以便在粘贴事件触发时将插入符号重定向到屏幕外的文本区域。

Answer 3

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).val();
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

Answer 4

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

对于 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, ''));
        }
    });
});

两个注意事项：

1. 如果粘贴时已经有文本，修剪发生在整个结果上，而不仅仅是粘贴的内容。

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