えー全く考慮していませんでした。
何をって?
ぼくは、いま仕事で「EFO(エントリーフォーム最適化)」施策に取り組んでいて、少しでも入力の完遂率を上げれる様、日々奮闘しています。
今回は、その取り組みの中で指摘された事項についてまとめてみました。
— 某日 —
Web担当者と連携し、イメージ案を作成。様々な人のチェックを経て、実装が完了。残すは、動作確認のみ。
・
・
以上、経緯でした。それでは、設定方法について書いていきます。
JavaScriptの有効/無効でフォームの”必須”項目の文言を切り替える方法
まず、<html> タグにクラス名「no-js」を付与します。 (JavaScript(以下、JS)ライブラリのModernizr(モダナイザー)を利用している場合は、デフォでこういった設定になっているかと思います。)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="ja" class="no-js"> <head> <!-- head内の記述 --> </head> <body> <!-- body内の記述 --> </body> </html> |
↓
<th>タグ内に”JS有効/無効時”の文言を2つとも記述し、別々のクラス名を付与します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="ja" class="no-js"> <head> <!--head内の記述--> </head> <body> <table> <tr> <th>法人名 <span class="entry_form_item_js">必須</span> <span class="entry_form_item_no-js">法人のみ必須</span> </th> <td> <input type="text"> </td> </tr> <tr> <th>法人名カナ <span class="entry_form_item_js">必須</span> <span class="entry_form_item_no-js">法人のみ必須</span> </th> <td> <input type="text"> </td> </tr> </table> </body> </html> |
↓
続いて、JSが有効になっている時は、「no-js」クラスが削除される様、jQueryのremoveClassメソッドを記述します。
1 2 3 | $(function(){ $('html').removeClass('no-js'); }); |
↓
最後に、表示/非表示の設定をCSS側で行います。
1 2 3 4 | /* CSS側の設定*/ .no-js .entry_form_item_js{ display: none !important; } .entry_form_item_no-js { display: none !important; } .no-js .entry_form_item_no-js { display: block !important; } |
↓上述のコードを全てまとめるとこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html lang="ja" class="no-js"> <head> <meta charset="UTF-8"> <title>JS有効/無効でフォームの必須項目の文言を切り替える方法。</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $('html').removeClass('no-js'); </script> <style type="text/css"> .no-js .entry_form_item_js{ display: none !important; } .entry_form_item_no-js { display: none !important; } .no-js .entry_form_item_no-js { display: block !important; } </style> </head> <body> <table> <tr> <th>法人名 <span class="entry_form_item_js">必須</span> <span class="entry_form_item_no-js">法人のみ必須</span> </th> <td> <input type="text"> </td> </tr> <tr> <th>法人名カナ <span class="entry_form_item_js">必須</span> <span class="entry_form_item_no-js">法人のみ必須</span> </th> <td> <input type="text"> </td> </tr> </table> </body> </html> |
これで、JSの有効/無効でフォームの必須項目の文言が切り替わります。
ざっと説明すると…
- ページの全要素にクラス名「no-js」が付与されているものの、JSが有効の時は、removeClassメソッドが呼び出され、「no-js」は削除される。
- JSが無効の時は、removeClassメソッドが呼び出されない為、ページの全要素に「no-js」は付与されたまま。
- JSが有効な時は「no-js」がつかない。逆に無効の時は「no-js」がつく。それを利用し、CSS側の設定で項目の表示を切り替える。
こんな感じです。
仕組みを知れば知るほど細かい所まで配慮されてるなーと感心する今日この頃。
思考力(?)の低さを何とかしたいと思いつつ、一体どれ位の時を経れば、先輩たちと肩を並べることができるんだろうか…とも思う日々。
遠いな〜。