スイッチング機能で要素を有効化しても入力不可になります
shikisimaさん (2022-03-01 03:08:00) www.inatari.or.jp/form_switcher_test.html
素晴らしいソフトウェアを公開いただきありがとうございます。お世話になっております。
設置URLページの通り、
4つの選択肢のラジオボタングループ「移動手段」と、3つの選択肢のラジオボタングループ「連絡手段」を設置しました。「連絡手段」の選択肢をクリックすると選択肢に応じて有効化(表示)される入力フォームが切り替わるページです。
WindowsPCの各ブラウザ(Chrome等)やAndroidスマートフォンでアクセスして操作すると、期待通り入力フォームが切り替わり入力可能です。しかしiPhoneのSafariでアクセスして操作した場合のみ、入力フォームは切り替わるものの入力できないままとなってしまいます。
[再現環境]
iPhone Safari
※デバイスを変えて試しましたがiPhoneであれば起きるようです。
再現する一例は、iPhone7(iOS 15.3.1)、Safariは604.1です。
[再現手順]
設置URLのページを表示後、最初に「連絡手段」の「電話」または「FAX」をクリックします。
[問題]
「連絡手段」で選んだ選択肢に応じフォームが表示されますが、入力できない状態です。
[メモ]
・上記問題が生じた状態で、再び「電話」または「FAX」をクリックすると入力可能なフォームが表示されます。以降、選択肢を切り替えても入力可能なフォームが表示され続けます。
・htmlを編集し「移動手段」の選択肢数を3つ以下にすると、問題が再現しなくなります。
なにか私が使い方を誤っているものと思いますが、どうにも解決できません。
お手数おかけして恐縮ですが、ご教示いただければ助かります。
toggle機能というのがあります
和田 (2022-03-01 20:51:34) www.synck.com
www.synck.com/downloads/cgi-perl/mailformpro/feature_1448318896.html
上記URLに記載されている方法のほうが簡単にやりたいことを実現できると思います。
また、現在分岐のターゲットをdivでくくっていると思うのですが、dlとdtの間にdivをはさむという構造は正常な構造ではないため、HTMLの構造自体は破綻しないように、dlを分離するなどして別なオブジェクトとしてください。
ありがとうございます
shikisimaさん (2022-03-02 10:16:57) www.inatari.or.jp/form_switcher_test.html
和田様
早速のご回答ありがとうございます。
こんなピッタリな機能があったのですね。
よく仕様を読み込まず煩わせてしまい申し訳ございませんでした。
早速こちらの機能を使ってページを書き直します。
また改めてご報告させていただきます。
期待する動作を実現できました
shikisimaさん (2022-03-02 11:03:53) www.inatari.or.jp/form_switcher_test.html
和田様
data-toggleとdata-toggle-hideを使って期待する動作を実現できました。
ご指摘いただいたdl分離についても鋭意編集中です。
まずはおかげさまで本件の問題が解決できましたこと、
ご報告とともに厚く御礼申し上げます。ありがとうございました。