javascript - 如何在jquery中获取最终粘贴的文本？

Question

我想在用户在字段上书写或粘贴文本时 trim 字段中的文本，以下代码效果很好，但只有一个问题，当用户选择所有文本以将其替换为粘贴的文本或放置时光标在其中插入粘贴的文本，代码重复当前值+末尾的新值，我该如何修复它？

$(document).on('paste', "input[type='text'], textarea", function(e) {

            let val = $(this).val();            
            val = val.trim();
            val = val.replace(/(?:^\s+|\s+?(\s))(\S+)/g, "$1$2");
              val = val.replace(/\s+(\s)$/, "$1");
            $(this).val( val );

    } );

我相信我需要做的是正常粘贴，获取最终粘贴的文本并 trim 它，但这就是问题如何获取最终粘贴的文本？你能帮忙吗？

Answer 1

简而言之，粘贴事件不是一个允许您动态更改粘贴文本的管道。您可以访问剪贴板，但从中获取数据有点困难，因为有 questionable browser support不仅适用于粘贴事件，还适用于所述事件中的剪贴板数据。

onChange 或 onBlur 是您最好的选择，因为即使在用户粘贴其值之后，这也是更新您的值的好时机:

$("input[type='text'], textarea").bind('blur', function(e) {
        $(this).val($.trim($(this).val()));
} );

无论他们输入空格还是粘贴它们，这都会起作用。如果必须粘贴，那么您可能需要使用上面的内容和粘贴事件，但粘贴事件仅设置一个共享 bool 值就像“valueIsPasted”为 true，然后只有当该值为 true 时才可以执行上述操作。我不喜欢这个解决方案，但不幸的是，粘贴支持不是很好。最重要的是，这在 IE 中仍然不起作用，因为它不支持粘贴事件。

更新:

看起来像W3Schools begs to differ关于浏览器支持；但是，我仍然认为 onChange 或 onBlur 是您最好的选择，因为一旦用户完成编辑值或完成控件的操作，它就允许您更改值，并且绝对有效。看看我的codepen .