WEBTEQWEBTEQWEB制作・技術・解説メニューコンテンツへ移動ホームスポンサーリンクAndroidでinputが入っている要素をappendしたとき入力できなくなる件を回避Android4.2.2でデバッグしているときに、入力できなくなっているのを発見してからだいぶ死闘したのでメモ。ドロワーメニューの中に入れてある検索ボックスをAndroidから確認していたら、動きは快適だったのだけれども入力ができなくなっていた。検索boxにフォーカスを当てるとすぐに外れてしまう。再度当てると、カーソルが点滅してやっと入力できそうな気配になるのだが、一文字入れると勝手に確定してしまい、続きを入力できなくなる。一度やるとまた同じく一文字だけしか入力できない。途中、怒って急激に連打すると何文字かは入れられるが、すぐに確定されてしまうので暗号めいた文字列を打ち込むことしかできない。ドロワーメニュー特有のFIXEDの問題だとすぐに思った。fixedやabsoluteとinputやtextareaを絡めるとAndroidでは良いことがないのはよく語られている。何が問題かを探ることが大事だ。検証として、position:fixedを外して、普通に入力できるかを試した。これでもやはり同じ現象になった。問題はposition周りでないことに気がつくまでに1時間要してしまった。javascriptもいちいちコメントアウトしていって、原因になっているfunctionを特定していった。するとドロワーメニューにするために、メニューを一回appendTo()で移動している関数をコメントアウトすると、正常に動いた。原因がわかってすっきりしたところで、はて、レイアウトとマークアップを見直すか、と考えるとうんざりした。ドロワー用にもう一個メニューをHTMLに吐き出させるか、、、などと考えたりもした。あって悪い手ではないが、できればソースはシンプルに仕上げて開発に渡したい。スマフォのブラウザはPCとはだいぶ違う方法でレンダリングしているようだ。これはいろいろ見たり聞いたりしたことからの想像でしかないので決して確実な考えではないが、どうやらスマフォのブラウザはレンダリングしたときにボタンや入力フォームなどの位置を画面上の座標などで捉えているようなのだ。appendToで要素を移動させたばっかりに、レンダリングしたときの位置がうまく取れないのだろう、と想像する。レンダリングが完了する前に移動させれば良いのではないかと思いついたのが解決につながった。jQueryのappendToをload後に行っていたものを、loadが完了する前にappendToを行っておく。いうことで、javascriptの始めの方にappendToが発火するようにしたらうまく行った。コメントをどうぞスポンサーリンク▼この記事には関連リンクページがあります。AWESOME(チートシートも)の使い方とその魅力を解説「CSSでアイコンを簡単に設置できる!」iPhone(iOS)のブラウザで、iframeの中でスクロールアニメーションが動かない!とき。背景のない要素がクリックできない件Dreamweaverで複数行(改行を含む)の正規表現を解決、、、。ブラウザのウィンドウサイズを変更するとレイヤーやなんかがずれる】htmlでimgの回り込みを使った場合に1行目だけがセンタリングされてしまう。WordPressビジュアルエディタのpタグ、brタグを表示させないようにカスタマイズする。a:linkを指定すると見えなくなったり消えたりする。classIE6で印刷CSSを作ったが、うまくA4には納まらなかった。プリント用CSSで改行を操作する。IE6のなんのバージョンだか知らないけれども初期化しておかないと文字がズレる例があった。floatでページレイアウトをしている場合は、1ページしか印刷されないケースがある。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。操作の結果できるパーティションはアライメントが正しくないためにパフォーマンスがでません。二日酔いでそんな気になれない!Windows10どうしても消えないディレクトリ名・ファイル名を削除するブロック要素とブロック要素同士をfloatとoverflowで回り込みフロートができるなんて...CSSネタUBUNTUにfail2banを導入したが、fail2banの起動でエラーが出てしまう。固定ページでループが含まれているときに、固定ページ自体のIDを取得したいとき。'さくらサーバーのhtaccessによるリダイレクトでループを防ぐ書き方。httpからhttpsにリダイレクトなんか特に。それはルーターのせいだった。自サイトにあるWordPressをfile_get_contentsで引き込みたいときPhotoshopで「不明なJPEGマーカー」とエラーが出てしまう件PEARのamazonAPIから商品一覧を取得できるServices/Amazon.php。