jQuery 簡単軽量!入力例を表示するプラグイン【clearfield】を使用してフォームを改良する方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回から少し発展してjQueryを使っていきたいと思います。まずは【clearfield】というプラグインを使ってテキストのフォーム内に記入例を表示してみます。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。



発展編

9. 入力例を表示する > clearfield


 
本プラグインを使えば簡単に【 例)info@sample.com 】のような入力例をフォーム内に表示させる事ができます。また入力前・入力後での文字色や文字サイズ変換もすぐ実装できますので非常に便利です。容量852バイト(コンプレス版)というところも魅力ですね。

未実装 実装後

HTML


<input type="text" class="fm" value="info@sample.com">

JS

<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.clearfield.js"></script>
<script type="text/javascript">
$(function() {
$(‘.fm’).clearField({
blurClass: ‘myBlurredClass’,//入力前のクラス
activeClass: ‘myActiveClass’//入力後のクラス
});
});
</script>

CSS

.myBlurredClass{color: #bbb}
.myActiveClass{color: #000}

 

10. リストやテーブルの背景を交互に変更する

入力例のプラグインの設定は以上になりますが、記事が少し短いので追加で【リストやテーブルの背景を交互に変更する方法】も記載しておきます。jQueryを使えばたった数行で実現可能ですのでぜひお試しください。

未実装 実装後

HTML


<form id="sample_form">
<ul>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
</ul>
</form>

JS

$(function() {
$(‘#sample_form ul li:odd’).css({‘background’:’#ccc’});
//:oddで2番目4番目6番目〜という順序で背景を変更しています
});

CSS

#formbd ul li{background: #c4c4c4;}
/*2番目4番目6番目〜以外の背景色*/

以上になります。デモでは今回のtipsを適応した例が確認できますので、もしよろしければ合わせてご確認ください。