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

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

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

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

解決方法は色々あるらしい。

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

ただ、この方法だとPC / iPhoneでは問題ないもののAndroidでは動かない。(そもそもpaste・cutイベントが動かない）

こちらのライブラリを使うと、Androidでもコピペした際に動くらしい。

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

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

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

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

tech::hexagram