2016-04-14 13 views
0

私は競技用のフォームを作成しました。私は4文字をそれぞれ4つのテキストボックスに入れ、16桁のコードを作成します。これはすべて正常に動作しています。予期しないペーストイベントの動作

コード例:LAME DKAJ XWNS YXRZ

私の問題は、私は(ユーザーがコードを貼り付けすることを決定した場合のために)ペーストイベントを監視したい、です。しかし、ソースの16桁のコードには空白が含まれています。私の目的は、これらのスペースでコードを分割して、4つの4文字のグループを与え、自動的にボックスを埋めることです。

ただし、pasteイベントを使用すると予期しない動作が発生します。たとえば、最初にボックスにテキストを貼り付けると、値のconsole.logが空の文字列を返します。 2番目のペーストは最初にあったはずのものなどを記録します。これは、コードがテキストボックスに貼り付けられた後ではなく、貼り付けイベントの開始時にログに記録されていることを示しています。私はこれを間違ってやっているのですか?

これが貼り付けイベントの意図した動作であれば、貼り付けイベントが完了した後に、どのようにボックス内のテキストを取り込むことができますか?テキストはこのコードを使用貼り付け得るために

https://jsfiddle.net/h4w946js/(コンソールを確認してください)

// JS CODE 

function splitCode(){ 
    var input = document.getElementById('part1'); 

    input.addEventListener('paste', function(){ 
     console.log(this.value); 
    }) 
} 
+0

はい、それが動作する方法です。 – Pointy

+2

'setTimeout()'を使うと、 "paste"イベントループの終了後にアクションを実行できます。 – Pointy

答えて

2

input.addEventListener('paste', function(e) { 
    if (window.clipboardData && window.clipboardData.getData) { // IE 
     console.log(window.clipboardData.getData('Text')); 
    } else if (e.clipboardData && e.clipboardData.getData) { // other browsers 
     console.log(e.clipboardData.getData('text/plain')); 
    } 
}); 
+0

@ h2oooooooが修正されました。 – jcubic

+0

完璧、ありがとうございます。 – Lewis