RSS

Userfriendly jQuery for Input

01 11月

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

広告
 
 

タグ: , , , , , , ,

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。