なぜjqueryのペーストイベントがプレペーストで発生するのですか?

私は Twitter のようなテキストボックスを作成しようとしています。

  • 単語数
  • 使用されているイベントの変更、キーアップ、および貼り付け

KeyupとChangeイベントはうまくいきましたが、ペーストイベントは少し奇妙です。テキストエリアに何かを貼り付けると、その瞬間に何かデバッグした後にペーストイベントが発生してテキストボックスに何かを貼り付ける前に Twitterでこれがどのように処理されているのか分かりません。   ここに私のコードです:   イベント:

'click #textboxId'  : 'submitQuestion'
'keyup #textboxId'  : 'wordCounter'
'change #textboxId' : 'wordCounter'
'paste #textboxId'  : 'wordCounter'

wordCounter: ->  
  #Code for Word Count#  

貼り付けイベントのプリペーストの性質のため、そのインスタンスのワークカウントは変更されません。
あなたの提案と助けに感謝します、ありがとうございました。

5
イベントを変更しない
追加された 著者 aWebDeveloper,
サンプルコードを表示する
追加された 著者 aWebDeveloper,
ああそれはcoffeescriptだから、私はそれの任意のアイデアを持っていない。私はまだjqueryコードをコーヒースクリプトに変換しようとしている
追加された 著者 aWebDeveloper,
@WebDeveloper - マウスの右ボタンやツールバーの貼り付けに問題があります。私は本当に change イベントがこれをキャッチしていなかったことに驚いていました。
追加された 著者 mrtsherman,
そのコードはどの言語ですか?中括弧などを削除した場合を除き、JavaScript(jQueryを含む)ではありません。JavaScriptではなくなります。とにかく、「貼り付け」イベントが発生した場合、数ミリ秒後にワードカウントを更新するために setTimeout ハックを追加することができます。しかし、一般的には、テストしているブラウザーで作業しても、いくつかのブラウザーではペースト・イベントをまったく処理できません。
追加された 著者 nnnnnn,
@WebDeveloperいいえ、変更イベントはペースト時のカウントを更新しません(即座に)、何かをペーストした後にテキストボックスからクリックしなければなりません。
追加された 著者 Arpit Rawat,
@nnnnnnそのbackbone.jsとコーヒースクリプト。さて、私はsetTimeout関数を試してみましょう。ありがとう。
追加された 著者 Arpit Rawat,
@WebDeveloperそのすべての私の質問には、wordCountコードを意味するのですか?
追加された 著者 Arpit Rawat,

4 答え

この例を参照してください。

http://jsfiddle.net/urEhK/1

$('textarea').bind('input propertychange', function() {
    $('#output').html($(this).val().length + ' characters');
});

その行動は非常に奇妙でした。それらのイベントの1つがこれを適切にキャッチすると思いますか? Googleにこれ以上の回答はなかったことに驚きました。

9
追加された
@nnnnnn - あなたは正しいです。
追加された 著者 mrtsherman,
変更イベントは、フィールドを離れるとき(タブ移動またはクリックしないとき)にのみトリガされます。
追加された 著者 nnnnnn,
@ mrtsherman - ありがとう。以前はチェンジイベントを試していましたが、テキストボックスにペーストした後はボックス外をクリックしたときだけカウントが変化しました。実際には動作していないときにペーストイベントがこれを処理できる場所が見つかったが、結果は同じだった。とにかく私はChangeとKeyupイベントを使ってもう一度試してみます。再度、感謝します。
追加された 著者 Arpit Rawat,
   function update()    
   {
       alert($textbox.val().length);
   }


    var $textbox = $('input');
    $textbox.bind('keyup change cut paste', function(){
        update(); //code to count or do something else
    });
   //And this line is to catch the browser paste event
    $textbox.bind('input paste',function(e){ setTimeout( update, 250); });  
2
追加された
正しい答えとして私の投票をした場合、それはうまくいったのですか?
追加された 著者 aWebDeveloper,
@ WebDeveloper-構文の変更の違いだけがcoffeescriptには何もありません。ありがとう。
追加された 著者 Arpit Rawat,

bind()の代わりにon()を使用する必要があります。こちらの記事をご覧ください。 名前付き関数を作成する必要もなく、無名関数を作成することもできます。

$('#pasteElement').on('paste', function() {
    setTimeout(function(){
        alert($('#pasteElement').val());
    }, 100);
});
0
追加された

最初に元のデータを取得することができます。イベントの貼り付けデータを取得して追加することができます。

  $("#id").on("paste keypress ",function(event){
               //eg. you want to get last lenght
                 var length=$("#id").val().length;
                 if(event.type == "paste"){
                    //then you can get paste event data.=

length+=event.originalEvent.clipboardData.getData('text').length;
                }


            });`
0
追加された
コードはコピー・ペーストの単語制限イベントに最適であり、単語の制限を制限します。
追加された 著者 Bachas,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript