Question

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

$(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 );

    } );

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

Answer 1

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

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

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

无论是输入空格还是粘贴它们都可以使用。如果必须粘贴它，那么你可能想要上面的内容和粘贴事件，但粘贴事件只设置一个共享布尔值喜欢＆＃34; valueIsPasted＆＃34;如果是真的，那么只有在该值为真时才能执行上述操作。我不喜欢这种解决方案，但不幸的是，粘贴支持并不是很好。最重要的是，这仍然不适用于IE，它不支持粘贴事件。

更新

在浏览器支持上看起来像W3Schools begs to differ;但是，我仍然觉得onChange或onBlur是你最好的赌注，因为一旦用户完成编辑值或完成控件，它就会允许你更改值，并且肯定有效。看看我的codepen。

Answer 2

问题在于您的修剪代码首先运行（导致数据的一个副本放在元素中），并且粘贴发生在第二个（最后导致数据的第二个副本）。 /强>

如果我们延迟修剪代码，问题就会很简单地解决：

＆＃13;
＆＃13;
$("#txtInput, textarea").on('paste', function(e) { // Store the invocation context (the input element) // because it will change in the setTimeout var ctx = this; // Wait 1/10th of a second before trimming the data // This will allow the paste to complete normally. setTimeout(function(){ $(ctx).val($(ctx).val().trim()); }, 100); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="txtInput" size="40" value=" there are leading and trailing spaces here "> <textarea></textarea>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: