フォーム入力例

フォーム入力例 | よく使うjQuery

問合せフォームなどでよくある入力例をjQueryベースで作成。この方法なら入力例の場所もとらない上にわかり易いと思います。




フォーム入力例
■html
<input name="your_name" value="山田 太郎">
<input name="your_tel" value="090-0000-0000">
■javascript
$(function() {
	$("input").css('color', '#999');
	var input_val = [];
	$("input").each(function() {
		input_val.push($(this).val());
	});
	$("input").focus(function() {
		var chk_num = $("input").index(this);
		var chk_val = $("input").eq(chk_num).val();
		if(chk_val == input_val[chk_num]) {
			var def_val = $(this).val();
			$(this).val('');
			$(this).css('color', '#333');
			$(this).blur(function() {
				if($(this).val() == '') {
					$(this).val(def_val);
					$(this).css('color', '#999');
				}
			});
		}
	});
});

■サンプル

解説

valueの値が入力例のテキストになります。
以下は入力例の初期表示カラーの設定

$("input").css('color', '#999');

↓変数「input_val 」にinputタグのvalueの値を格納します。

var input_val = [];
$("input").each(function() {
	input_val.push($(this).val());
});

↓イベント条件は「inputにフォーカスが当たったら」とします。

$("input").focus(function() {

↓変数「chk_num」はフォーカスの当たったinputのインデックス(番号)を格納し、「chk_val」には「chk_num」に格納した番号(番目)のinputのvalueの値を格納します。

var chk_num = $("input").index(this);
var chk_val = $("input").eq(chk_num).val();

↓if文はテキストが書き換わったか判定する為の条件式になっています。読み込み時のvalueの値とフォーカスが当たった時のvalueの値が同じかを判定します。

if(chk_val == input_val[chk_num]) {

↓valueの値が同じ時(つまり入力例が表示されたままの時)はフォーカスでvalueを空にしてテキストを打ち込むように促します。

var def_val = $(this).val();
$(this).val('');

↓読み込み時に設定したフォントカラーを入力時に変更します。

$(this).css('color', '#333');

↓テキストが打ち変えなかった場合は初期のvalueの値(入力例)を表示するようにします。

$(this).blur(function() {
	if($(this).val() == '') {
		$(this).val(def_val);
		$(this).css('color', '#999');
	}
});



One thought on “フォーム入力例 | よく使うjQuery”

  1. 素晴らしい記事をありがとうございます。
    input要素に対して全部同じ動きにすると、buttonのvalueなどに対しても同じ動きになってしまうので、セレクタをinput:textなどにするとよいかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です