Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜
さて、今回はフォームです。
お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。
このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。
でもまぁ、ビミョーなフォームが多いですよね。
本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。
しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。
しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！イイね！」と言ってもらって評価が上がっちゃうかも知れません！
と、よく分からない前置きはさておき、サンプルとダウンロード用のzipです。
サンプルページを見ていただくと、何処にでも有りそうな感じのフォームが有ります。
このフォームの項目が「ふりがな」の入力エリアに半角カナやカタカナで入力してフォーカスが外れるとあら不思議、ひらがなに勝手に変換してくれます。
同様に電話番号を全角で入力しても、フォーカスが外れると半角に変換されます。
なんてステキ！
このステキJSは、入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネットより、詳細な説明やダウンロードが出来ます。
ちなみに、単体で動作するので、jQueryとかは不要です。
次に、郵便番号。
よく郵便番号を入力した後に「住所自動入力」みたいなボタンを押して住所が入るとかって見かけますが、これはそんな面倒なことは不要！郵便番号7桁を入力すると自動的に住所が入力されます。しかも、全角半角どちらでもOKだし、ハイフンがあっても無くても大丈夫なんですよ、奥さん！さらに、住所が合併とかで変わってもメンテナンスとか不要と言うスグレモノ。
やばい、なんてステキ！！
このステキJSは、Kotarok先生が公開している kotarok/jQuery.zip2addr - GitHubより、ダウンロードとかが出来ます。
サンプルは、get jp postal codeより確認できます。
これと次のはjQueryが必要です。
今までは、上記の2つを基本的に利用してたんですが、もう一つステキなのを見つけたので、これで「フォーム用JS 三種の神器」が揃った気がする。
最後の一つは、先日都内某所で打ち合わせをしてた際にですね、フォームでエンターを押してしまってエラーになると、そのサイトで登録とかするのがイヤになる、みたいな話を聞いた時に、ちょっとハッとしたんです。
入力中に間違ってエンターキーを2度押しちゃうとか、何らかの誤操作で確認画面やエラー画面に飛ばされて戻ったら内容が消えてたって有りがち。
ある程度慣れてる人なら、次に移動するのにTabキーを当たり前のように使うけど、結構知らない人も居たり、Excelとかってエンター押すと下のセルに移動する訳だから、似たような感覚でエンターを押しちゃうかも？と。
で、今回エンターを押すとTabと同様に次の入力エリアに移動するようにしました。
サンプルフォームで適当にエンター押してもらうと移動するのが確認できます。
これで、間違って確認画面に移動してしまう事はなくなるかなと。
このステキJSは、Enter/Tab項目移動とFunctionKey制御をplugin化 - せかにゃ～より、解説とサンプル、ダウンロードが出来ます。
フロントエンドで実装できる範囲でもフォームがいい感じになった気がします。
しかも、いずれも基本的にJS読み込んで数行書くだけで実装できるのであらゆるサイトですぐにでも使うことが可能です。
この手軽さと、万が一動いていなくてもユーザー側としては不便を感じない点もすごくステキです。
3点セットである必要もないので、お好きなのを利用してみては如何でしょうか？