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 · GitHub
ソースコードを見ると、setTimeoutで回しているような様子が伺える。
3. setIntervalでやりたいことを延々と回す
入力フォームの空文字チェックなど、入力が変化したかどうかを繰り返しチェックしたいのであれば、これが一番お手頃かと。
setInterval( function() { //やりたい処理 }, 1000 );