jqueryで最後に貼り付けたテキストを取得するには？

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

、ペーストイベントがそのパイプラインではありませんその場で貼り付けテキストを変更することができます。クリップボードにアクセスすることはできますが、ペーストイベントだけでなく、イベント内のclipboardDataのquestionable browser supportがあるため、データを取得するのは少し難しいです。

のonChangeまたはこれは、ユーザーが自分の価値を貼り付けた後でも、あなたの値を更新するのに最適な時間であるとして、あなたの最高の賭けは、onBlurイベントです：

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

これは、彼らが空白に入力するかどうか、仕事、またはペーストします貼り付けが必要な場合は、代わりに上記と貼り付けイベントを使用することができますが、貼り付けイベントは単に "valueIsPasted"のような共有ブール値をtrueに設定するだけで、上記を行うことができますその値が真であるとき。私はその解決策が大好きではありませんが、残念なことに、ペーストのサポートは素晴らしいものではありません。それに加えて、pasteイベントをサポートしていないIEではまだ動作しません。

更新：

は、ブラウザのサポートにW3Schools begs to differように見えます。しかし、私はまだonChangeまたはonBlurがあなたの最高の賭けであると感じています。ユーザーが値の編集やコントロールの完了後に値を変更できるようになり、確実に働きます。私のcodepenをチェックしてください。

Answer 2

問題は、トリムコードが最初に実行されていること（データに1つのデータコピーが配置されていること）とペーストが2番目に発生していることです。

我々はトリムコードを遅らせる場合は、問題が非常に簡単に解決されます。要するに

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

<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>