うしろのこの本ください

なんでもかきます

OnePageScrollでスクロール制御中にForm部品にフォーカスすると制御が破壊される

初めてのプログラミング記事がバグの備忘録だとは思わなかったよ。

PCと泥端末で同じWebアプリケーションからForm入力するシステムがあって、そこでせっかくだからデータ一覧、画像チェック、入力フォームと3ページにわたって機能分割しようとなった。

んで泥のお節介にスクロール制御をぶっ壊された話です。ページ生成はjsp

OnePageScroll
github.com



どうも原因はスマホ系端末特有のフォーカス時の自動スクロールとソフトウェアキーボードっぽかったのでそれをなんとかするためにググったら、readonlyにしとけばいいみたい。
qiita.com


というわけで実践

<html:text property="hoge" styleClass="piyo" maxlength="3" readonly="true"></html:text>


これで確かに押せないから自動スクロールもソフトウェアキーボードも無効にできたけど、何も入力できないままじゃ置物じゃん。
というわけでバーチャルキーボードを表示してjsから入力させることに。

qiita.com

実はこの入力フォームある条件下以外ではdisabled状態になってるんだけど、その状態で部品を触ってからdisabled解放、部品タップでキーボードが出てこない!
disabled属性ならフォーカス合わないしイベント発火もしないと思ってたんだけどなぁ。

仕方ないからキーボード出すイベントに条件文を付けて完成。

<html:text property="hoge" styleClass="piyo keypad" maxlength="3" readonly="true" disabled="true"></html:text>

$('.keypad').on('touchstart',function(){
  var disabledFlg = $('.インベントリ').val(); //解放条件が入ったインベントリの中身取得
  if(disabledFlg === "01")$('.keypad').keypad(); //インベントリ要素が01の時はdisabled = falseなので発火
});


jQuery嫌いになりかけたぞ。