スマホでテキストボックスの随時キー入力判定方法

テキストボックスがあり、そこに入力された文字列をキー入力の度に
取得し、その文字列をキーにDBを検索し結果を表示するシステムを
作成しています。ただし日本語入力に関しては変換中は無視して確定時に
DBの検索を行う仕様です。

JQueryのkeydownとkeyupイベントを利用してPCでは実現しています。
ただ、スマホ(Androidやiphone)だと、日本語入力の時に予測変換候補
みたいなのが表示されて、それを選んで入力を進める事が多いと思いますが、
この予測変換候補を選んでもkeydownもkeyupもkeypressもイベントが
発生しないようなので、随時入力文字列を取得する事ができません。
そこで、keydownやkeyupイベントではなくて、タイマーで一定間隔で
テキストボックスの入力文字を取得する事も試してみましたが、この
場合だと日本語変換途中も文字も取得できてしまい、さらに日本語変換中
かどうかの情報が得られないので、変換中は無視という要件が満たせません。

keydownもkeyupもkeypressも発生しないので、どうしようもなさそうな
気はしていますが、ダメ元で、何か良い方法がないかお知恵を借りたく
投稿させてもらいます。宜しくお願いします。

No.2 ベストアンサー 回答者： fufufunofufufu 回答日時： 2016/05/20 17:31

こんにちは。

では、テキストボックスにフォーカスされている場合、
ウィンドウのどこを押してもvalを取得するというふうに変えてもダメですかね？
$(function(){
$("input:text").on("focus", function(){
$(window).on("click blur keydown keyup keypress change touchstart", function(){
var new_val = $("input:text").val();
$(".text").text(new_val);
});
});
});

さっきご飯食べながらだったので、
今ちょっと、作ってみました。
テキストエリアのリアルタイム取得で下のテキスト<p>に反映するみたいなのを。

私のアンドロイド5.1.1は大丈夫だったんですけど、iosは自信ないです。

この回答へのお礼

なるほど、windowのどこを押しても反応する作りですか。
この方法を基に改良して作りこんでみたいと思います。
ご親切にお付き合い頂き大変感謝しています。ありがとうございました。

お礼日時：2016/05/23 15:17

No.1 回答者： fufufunofufufu 回答日時： 2016/05/20 14:46

こんにちは。

キー入力のたびにとのことなので、必要なイベントを全て突っ込んで仕舞えばよいと思います。

例

$(function(){
　$("input:text").on("click blur keydown keyup keypress change touchstart", function(){
　　var anchor_text = $("input:text").val();
　　//取得したのを結果に出すスクリプトを書く
　});
});

多分、今回はこの中の.change()あたりが必要だったんじゃないかなあと思います。
フォーカスされたテキストボックスの中身が変わったら、こうするする、というイベントなので予測変換選択後にテキストが変われば取得してくれる気がします。
試してないけど。

頑張ってください。

この回答へのお礼

ご回答ありがとうございます。
試してみましたが、changeイベントだと、
テキストボックスからフォーカスが離れないと
発火しないようです。まだandroidしか試して
いませんが、andoroidだと予測変換候補の選択だと
ご提示頂いたイベント全て発火しませんでした。かなり厄介です・・・

お礼日時：2016/05/20 16:24