7のイベントを再登録するWindows7/8/10でRustを別ドライブに展開する際のTIPSPHP+SQLでMySQLのInnoDBのテーブルに複合キーかつ連番のINSERTを実装するネイティブなPHPでselectタグやradioボタンの選択状態をどう表現するかエンターキーによる入力項目のフォーカスの移動をWeb系システムに実装してみるCattleMute>JavaScript/jQuery>selectとoptionのメニューをスクリプト制御で表示しないようにする2019.10.15selectとoptionのメニューをスクリプト制御で表示しないようにする忙しさに追われて久しぶりの更新となるが、現行でシステム開発を行っている際に、フロントエンド側のスクリプトを弄っていた時の話。通常、select要素で設定した選択ボックスをクリックしたりすると、option要素に登録したブラウザ依存のメニューが表示される。そりゃ当然そうだろうと思う。自分の開発しているシステムで画面インターフェイスの兼ね合い上、こいつ自体を制御してやりたい。selectとoptionのデフォルトで表示されるメニューを表示しないようにしたかった。選択ボックスの内容変更は飽くまでも別の要素から行う選択ボックスをフォーカスした際はカーソルキーで内容だけは変更できるようにするこういったもの。ブラウザ依存のメニューのまま見た目だけを弄る方法は今日びいくらでもあるが、選択ボックスの内容が100とか200とかなると、例えどれだけCSSで手の込んだ装飾しようが、ただきれいなだけで全くもって実用に足りない。47都道府県の選択肢を選ぶのでさえ大変なのに、100とか200とか行ったら、それこそもう空白でもいいかな、ってなってくる。大量の選択肢がある場合、それを見やすくした別の要素の選択肢からselect要素本体を変えるべきである。・・・とはいえ、それをやろうとすると問題が多発。外側の要素からvalueの内容だけ変更しようにも、disabled属性をかければselectのデータが必要なときに値が飛ばんわ、readonly属性はそもそもselectタグには使えんわ・・・。none;かければ選択したくても出来んわ、IEにはどのみち対応していないわ・・・。CSS3のプロパティでuser-selectをかけても扱いとしてはdisabled属性と同じ、当然のことながらCSS3なのでレガシーブラウザでサポートされていないわ・・・。網掛け的にselect要素の上に余計な要素をかぶせて選択させないようにするのは何の解決にもならんわ・・・。ネットで調べてもわかんない・・・^q^詰まるところが、selectにHTML属性やCSS等の小細工で、手抜きで制御を加えようとすること自体がそもそもの間違いだということだろう。そこで、一度、select要素が何をトリガーとしてoptionに対応するメニューを出してきているかを検証してみた。IE9~11、Edgeでも同じ寸法でメニューが表示されるAndroid系端末のブラウザではタッチすることでメニューが表示されるiOS系端末のブラウザではタッチすることで対応するドラムロールが表示される。ドラムロールが表示される条件としては、タッチではなくフォーカスが入った時である。レガシーIEではiOS系端末と同様、フォーカスが入った時にメニューが表示される。これって全部イベントなんじゃね?そう。制約が多いselect要素と言えども、元を正せば所詮はただのHTMLノード。洗い出した内容から閃いたことは、これらのイベントがハンドリングされているのであれば、それらを全て無効化してやればいいということである。(ネットで方法がないか調べてもわからんときに結局最後に一番頼りになるのはやっぱ自分でひねり出した知恵やね!)イベントを無効化したselectからは、例えoptionがプレーンな状態だとしてもメニューは恐らく表示されないであろう。そこで、毎度おなじみjQueryでスクリプト制御を作ってみた。iOSのドラムロール避け。レガシーIEはおまけ程度(一瞬ちらつく)。false;}});一・二時間悩んだことが嘘のように、あっさりと解決した。実際はもう少しスッキリ見えるように書いているが、おおよそこんなところである。iOSのドラムロールは「超・変な仕様」であり、タッチしたときではなくフォーカスしたときに発火するのでフォーカスを外す。CEを除けば現行のブラウザではないためおまけ程度。CEが搭載されたロースペックな携帯入力端末で複雑なデータを触ることはまぁまずないだろうので、この辺はかなりテキトー。通常の端末であれば必要のない所だと思われるので、要らなければ消してしまっても問題は特に無いと思う。́・ω・`)ちなみに、readonly属性と同じような挙動をさせたい場合は、’keydown’イベントをいじって、方向キーやHOME・ENDキー等を取得するようにしてやればいいはず。あ、これをやったからと言って、フロントエンドの処理に満足してそのままデータをサーバーに飛ばすようなことは絶対にしないように。プログラム側での最終的なバリデーションはお忘れなく。カテゴリJavaScript/jQueryこの記事のコメントコメントはないです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。