RSS

タグ別アーカイブ: Tips

Userfriendly jQuery for Input

man at hand
The blank input field sometime makes me confused what I should enter.

That’s why user-frendly website has some example text displayed by gray color.
It not so difficult to make, and I think almost all Crossmedia user already know how to implement it into the campaign.

Here is one example by using jQuery.

PreSet Text for Input fields

1. Layout items

Just drop some input fields, and assign them to the database column.
Item Layout

2. Check the name

Because this tip identify each input field by class name, so you need to check the exact name by display preview of the campaign page. Then add identical class name by using another jQuery,
To do so, you need to know the name of each input fields. You can check it by using FireBug with FireFox. or even you can simply check the code of preview page.
Check name of input field

 

3. Add script

Here is the main part of jQuery script you need to add.

$(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });

It because this tip require to have default value for each input fields, so I give the value by script as well. Entire of script looks like below.

<script type="text/javascript">// <![CDATA[
$(function(){
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus1');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Company Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus2');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Your Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus3');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "example@example.com";

     $(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });
	 $(".focus2").focus(function(){
          if(this.value == "Your Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus2").blur(function(){
          if(this.value == ""){
               $(this).val("Your Name").css("color","#969696");
          }
     });
	 $(".focus3").focus(function(){
          if(this.value == "example@example.com"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus3").blur(function(){
          if(this.value == ""){
               $(this).val("example@example.com").css("color","#969696");
          }
     });
}); 
// ]]></script>

4. Add CSS

I also change the color of text by using CSS. Here is the code.

.focus1 {
    color: #969696
}

It will help visitor, and hopefully they won’t be confused.

NOG

広告
 
 

タグ: , , , , , , ,

ダイレクトスマイル

ダイレクトスマイル

はじめまして。DirectSmileのテクニカルサポート担当、NOGことNobuakiです。

今日からDirectSmile製品のテクニカルサポートのTipsや豆知識をここに記事として取り上げていきたいと思います。
ドイツに移住してはや一年半、今まで得てきた知識などをDirectSmileユーザー、これから購入予定の人に提供していきたいと思います。

Support

それとテクニカルナレッジとしての備忘録的なものになればなぁと。

NOG

 
コメントする

投稿者: : 2012年3月19日 投稿先 ダイレクトスマイル

 

タグ: , , , , , ,