THE HAM MEDIA BLOG

jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
FORM
javascript
Value

jQueryを使って入力フォームにサンプル文字を入れておくスクリプト

入力フォームに何を入力していいのか、
あらかじめサンプルを入力しておくのがいいと言われます。

でも、valueとしてあらかじめ文字を入力しておくと、
入力しようとするときにいちいち消す必要があるので面倒です。

なので、最初はサンプル文字をいれておき、
入力部分にフォーカスがいったときにそれを消すスクリプトを作ってみました。

サンプル

◆スクリプト

$(function(){
	$("input").val("キーワードを入力")
	   .css("color","#969696");
	$("input").focus(function(){
		if(this.value == "キーワードを入力"){
			$(this).val("").css("color","#000");
		}
	});
	$("input").blur(function(){
		if(this.value == ""){
			$(this).val("キーワードを入力")
			     .css("color","#969696");
		}
		if(this.value != "キーワードを入力"){
			$(this).css("color","#000");
		}
	});
});

◆プレビュー

上の入力欄になにか入力されるまで同じのが出ます。
最初のサンプルはあくまでサンプルなので、文字を薄めにしておきました。
何か文字を入力すると文字が黒くなります。

「キーワードを入力」と書かれた部分を、
必要に応じて、例や参考などとして変更しておくといいでしょう。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

クリックするとフォーム内の字が消えるJavascript
Excerpt: 検索やメールアドレス記入のための入力フォームに、あらかじめ「検索キーワードの挿入」といった薄い文字が記されていて、クリックすると消...
Weblog: 聖書・神学ブログDevotion Time
Tracked: 2008-12-03 19:07

[web][雑記][備忘録]フォームの作成に使えるjQueryプラグイン
Excerpt: 一番簡単にバリデーションと確認画面を作るのに必要と思われるプラグイン。 magicpreview フォームに入力した内容をリアルタイムで表示する。 とりあえずメモ。 基本設定 $(’form.exa..
Weblog: 吾唯足知
Tracked: 2009-02-13 13:37

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。