人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

inputでのフォーム送信時での質問です。

ajax通信でinputのテキストの内容をリアルタイムに送信しています。
PCの場合は問題ないのですが、スマホの場合、ペイストした場合や、入力候補欄から選んだ場合等にイベントが発生せず送信できません。


ちなみにgoogleやyahoo等の検索窓では、スマホのペイストテキストもリアルタイムで拾ってくれます。
どのようにすればよいのでしょうか?

javascriptの記載方法が分かれば教えてください。
よろしくお願いいたします。


●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号

スマホ版は分かりませんがPC版のgoogleは10ms程度で定常的なタイマイベントが発生しています。
このなかでそういった監視も行っているのでしょう。

こういうのはtickと呼んだりしますが、アニメーションなどリッチUIやユーザ行動の追跡などでは必要だったり便利だったりしますので、そういうサイトだと汎用的に使えるようなメッセージキューやディスパッチャ機構を実装して、そのメインループを回していたりします。
また、そこまで汎用でなくとも監視ルーチンの登録呼び出しのしくみ作ったり、機能をクラスでまとめて監視作業とかをメソッドにまとめてみたりして、定常的な呼び出ししてみたり。
ちなみに、ここも400ms程度で多分新着コメントのチェックとか行ってると思います。

具体的にはsetTimeoutかsetInterval使う感じです。
http://zvub.hateblo.jp/entry/2015/01/08/160130
http://mgzl.jp/2013/10/24/settimeout-loop/
どっちを使うかは長短ありますのでそれぞれです。
setTimeoutは処理が重くなった時には次の処理を遅延してくれるというか、javascript以外の処理時間が確保できるので固まりにくい。
その反面、次のsetTimeoutを仕込む前にエラーが発生するとイベントループが途切れます。

あと、実際の処理の呼び出し方も色々です。
https://t87r.wordpress.com/2013/09/10/javascript-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E5%85%A5%E5%8A%9B%E6%AC%84input-textarea%E3%81%AE%E5%80%A4%E3%82%92%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E7%9B%A3/
このように単純なものはべた書きでも良いのですが、ajaxとかだとコールバック地獄になったりします。
http://tmlife.net/programming/javascript/textarea-input-change-real-time.html
そこで上記のようにイベントを発生させて非同期処理する手もあります。
jqueryだとtriggerつかったりdeferredつかったりって感じです。

なお、上記だと10msとかしてますが、スマホだと電池消費量もありますし、現状のイベント処理の補助と考えれば数百ms程度で良いのではないでしょうか。
このへんは使用感もありますし環境ごとに変えるとか調整もあるかもしれません。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ