yoko/jquery.inputprompt.html

## jquery.inputprompt.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery.inputprompt.js</title>
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/qunit/testsuite.css"/>
<style type="text/css">
#container {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/qunit/testrunner.js"></script>
<script type="text/javascript" src="jquery.inputprompt.js"></script>
</head>
<body>
<h1>jquery.inputprompt.js</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>

<script type="text/javascript">
new function() {
	module('$.fn.inputPrompt');

	var container = $([
		'<form id="container">',
		'<input type="text" value=""/>',
		'</form>'
	].join('')).appendTo('body');
	var input = $('input', container);

	test('$.inputPrompt', function() {
		equals('function', typeof $().inputPrompt, '$.inputPrompt is function');
	});

	test('initialize', function() {
		input.inputPrompt('Miku Search');
		equals('Miku Search', input.val(), 'default input prompt value is "Miku Search"');
		ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
		ok(!input.data('edited'), 'input is not edited yet');
	});

	test('onfocus', function() {
		input.focus();
		equals('', input.val(), 'value to ""');
		ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
		ok(!input.data('edited'), 'input is not edited yet');
	});

	test('onblur', function() {
		input.focus().val('').blur();
		equals('Miku Search', input.val(), 'value to "Miku Search" (default text)');
		ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
		ok(!input.data('edited'), 'input is not edited yet');

		input.focus().val('ライン').blur();
		equals('ライン', input.val(), 'value to "ライン"');
		ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
		ok(input.data('edited'), 'input is edited');

		input.focus().val('Miku Search').blur();
		equals('Miku Search', input.val(), 'value to "Miku Search" (not defalut text)');
		ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
		ok(input.data('edited'), 'input is edited');

		input.focus().val('').blur();
		equals('Miku Search', input.val(), 'value to "Miku Search" (default text)');
		ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
		ok(!input.data('edited'), 'input is not edited yet');
	});

	test('clean (onsubmit, onunload)', function() {
		input.focus().val('');
		container.triggerHandler('submit');
		equals('', input.val(), 'clean value to ""');

		input.focus().val('くるくるまーくのすごいやつ').blur();
		container.triggerHandler('submit');
		equals('くるくるまーくのすごいやつ', input.val(), 'do not clean "くるくるまーくのすごいやつ" is not a default text');

		input.focus().val('');
		$(window).triggerHandler('unload');
		equals('', input.val(), 'clean value to ""');

		input.focus().val('嘘つきパレード').blur();
		$(window).triggerHandler('unload');
		equals('嘘つきパレード', input.val(), 'do not clean "嘘つきパレード" is not a default text');
	});

	container.remove();
	$(window).unbind('unload');
};


new function() {
	module('$.fn.inputPromptSetup');

	var container = $([
		'<form id="container">',
		'<input type="text" value=""/>',
		'</form>'
	].join('')).appendTo('body');
	var input = $('input', container);

	test('$.inputPromptSetup', function() {
		equals('function', typeof $.inputPromptSetup, '$.inputPromptSetup is function');
	});

	test('options', function() {
		$.inputPromptSetup({
			className: 'miku-lyrics-search'
		});
		input.inputPrompt('Miku Lyrics Search');
		ok(input.hasClass('miku-lyrics-search'), 'input has "miku-lyrics-search" class');
	});

	container.remove();
	$(window).unbind('unload');
};
</script>
</body>
</html>

## jquery.inputprompt.js
(function($) {
	var options = {
		className: 'input-prompt'
	};

	var focus = function() {
		var input = $(this);
		if (!input.data('edited'))
			input.val('');
		input.removeClass(options.className);
	};

	var blur = function() {
		var input = $(this);
		if (input.val() == '')
			input
				.data('edited', false)
				.addClass(options.className)
				.val(input.data('prompt'));
		else
			input.data('edited', true);
	};

	var clean = function() {
		var input = $(this);
		if (!input.data('edited')) input.val('');
	};

	$.inputPromptSetup = function(o) {
		$.extend(options, o);
	};

	$.fn.inputPrompt = function(text) {
		return this.each(function() {
			var input = $(this);
			input
				.data('prompt', text)
				.focus(focus)
				.blur(blur)
				.blur()
				.parents('form').submit(clean_handler);
			$(window).unload(clean_handler); // safari keeps input value

			function clean_handler() {
				clean.call(input);
			}
		});
	};
})(jQuery);
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>jquery.inputprompt.js</title>
	<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/qunit/testsuite.css"/>
	<style type="text/css">
	#container {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://view.jquery.com/trunk/qunit/testrunner.js"></script>
	<script type="text/javascript" src="jquery.inputprompt.js"></script>
	</head>
	<body>
	<h1>jquery.inputprompt.js</h1>
	<h2 id="banner"></h2>
	<h2 id="userAgent"></h2>
	<ol id="tests"></ol>
	<div id="main"></div>

	<script type="text/javascript">
	new function() {
	module('$.fn.inputPrompt');

	var container = $([
	'<form id="container">',
	'<input type="text" value=""/>',
	'</form>'
	].join('')).appendTo('body');
	var input = $('input', container);

	test('$.inputPrompt', function() {
	equals('function', typeof $().inputPrompt, '$.inputPrompt is function');
	});

	test('initialize', function() {
	input.inputPrompt('Miku Search');
	equals('Miku Search', input.val(), 'default input prompt value is "Miku Search"');
	ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
	ok(!input.data('edited'), 'input is not edited yet');
	});

	test('onfocus', function() {
	input.focus();
	equals('', input.val(), 'value to ""');
	ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
	ok(!input.data('edited'), 'input is not edited yet');
	});

	test('onblur', function() {
	input.focus().val('').blur();
	equals('Miku Search', input.val(), 'value to "Miku Search" (default text)');
	ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
	ok(!input.data('edited'), 'input is not edited yet');

	input.focus().val('ライン').blur();
	equals('ライン', input.val(), 'value to "ライン"');
	ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
	ok(input.data('edited'), 'input is edited');

	input.focus().val('Miku Search').blur();
	equals('Miku Search', input.val(), 'value to "Miku Search" (not defalut text)');
	ok(!input.hasClass('input-prompt'), 'input has not "input-prompt" class');
	ok(input.data('edited'), 'input is edited');

	input.focus().val('').blur();
	equals('Miku Search', input.val(), 'value to "Miku Search" (default text)');
	ok(input.hasClass('input-prompt'), 'input has "input-prompt" class');
	ok(!input.data('edited'), 'input is not edited yet');
	});

	test('clean (onsubmit, onunload)', function() {
	input.focus().val('');
	container.triggerHandler('submit');
	equals('', input.val(), 'clean value to ""');

	input.focus().val('くるくるまーくのすごいやつ').blur();
	container.triggerHandler('submit');
	equals('くるくるまーくのすごいやつ', input.val(), 'do not clean "くるくるまーくのすごいやつ" is not a default text');

	input.focus().val('');
	$(window).triggerHandler('unload');
	equals('', input.val(), 'clean value to ""');

	input.focus().val('嘘つきパレード').blur();
	$(window).triggerHandler('unload');
	equals('嘘つきパレード', input.val(), 'do not clean "嘘つきパレード" is not a default text');
	});

	container.remove();
	$(window).unbind('unload');
	};


	new function() {
	module('$.fn.inputPromptSetup');

	var container = $([
	'<form id="container">',
	'<input type="text" value=""/>',
	'</form>'
	].join('')).appendTo('body');
	var input = $('input', container);

	test('$.inputPromptSetup', function() {
	equals('function', typeof $.inputPromptSetup, '$.inputPromptSetup is function');
	});

	test('options', function() {
	$.inputPromptSetup({
	className: 'miku-lyrics-search'
	});
	input.inputPrompt('Miku Lyrics Search');
	ok(input.hasClass('miku-lyrics-search'), 'input has "miku-lyrics-search" class');
	});

	container.remove();
	$(window).unbind('unload');
	};
	</script>
	</body>
	</html>
	(function($) {
	var options = {
	className: 'input-prompt'
	};

	var focus = function() {
	var input = $(this);
	if (!input.data('edited'))
	input.val('');
	input.removeClass(options.className);
	};

	var blur = function() {
	var input = $(this);
	if (input.val() == '')
	input
	.data('edited', false)
	.addClass(options.className)
	.val(input.data('prompt'));
	else
	input.data('edited', true);
	};

	var clean = function() {
	var input = $(this);
	if (!input.data('edited')) input.val('');
	};

	$.inputPromptSetup = function(o) {
	$.extend(options, o);
	};

	$.fn.inputPrompt = function(text) {
	return this.each(function() {
	var input = $(this);
	input
	.data('prompt', text)
	.focus(focus)
	.blur(blur)
	.blur()
	.parents('form').submit(clean_handler);
	$(window).unload(clean_handler); // safari keeps input value

	function clean_handler() {
	clean.call(input);
	}
	});
	};
	})(jQuery);