Skip to content

Instantly share code, notes, and snippets.

@yoko

yoko/jquery.inputprompt.html

Created March 9, 2009 08:28
Show Gist options
  • Save yoko/76166 to your computer and use it in GitHub Desktop.
Save yoko/76166 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment