匿名質問者

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


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


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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/10/24 01:10:04

回答1件)

匿名回答1号 No.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程度で良いのではないでしょうか。
このへんは使用感もありますし環境ごとに変えるとか調整もあるかもしれません。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません