読者です 読者をやめる 読者になる 読者になる

tech::hexagram

personal note for technical issue.

inputに文字列をコピペした際に、JavaScriptで中身を取得する際のハマりどころ

過去にもハマった人がいるそうで、結構厄介な問題のようです。

javascript - How do I capture the input value on a paste event? - Stack Overflow

何が問題かというと、例えばこういうことをやりたい時に困る。
pasteイベントが発火した段階だと、inputの中身が空と認識されてしまう(ペーストした値が入る前に評価が走る?)

$('input').on( 'paste', function() {
    var inputValue = $(this).val(); //null
    if (inputValue) {
        //処理〜
    }
});

解決方法は色々あるようです。

1. setTimeoutで単純に遅らせる

$('input').bind({
    paste: function() {
        setTimeout( function() {
            var inputValue = $(this).val(); //hogehoge
        }, 10 );
    }
});

ただ、この方法だとPC, iPhoneでは問題ないですが、Androidでは動かないようです。(そもそもpaste, cutイベントが動かない)

2. ライブラリを使う

jQuery Text Events | Playground from ZURB

こちらのライブラリを使うと、Androidでもコピペした際に動きます。
書き方としては、以下のようになります。

$('input').bind({
    textchange: function() {
        var inputValue = $(this).val(); //hogehoge
    }
});

jquery.textchange.js
ソースコードを見ると、setTimeoutで回しているような様子が伺えます。

3. setIntervalでやりたいことを延々と回す

入力フォームの空文字チェックなど、入力が変化したかどうかを繰り返しチェックしたいのであれば、これが一番お手頃です。

setInterval( function() {
    //やりたい処理
}, 1000 );