Skip to content

Instantly share code, notes, and snippets.

@mash

mash/jquery.inputprompt.html

Forked from yoko/jquery.inputprompt.html
Created April 23, 2009 01:59
Show Gist options
  • Save mash/100235 to your computer and use it in GitHub Desktop.
Save mash/100235 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
// thanks yksk, http://gist.github.com/76166
// added focusDefault by mash
// use focusDefault to set default text when focus on input
(function($) {
var options = {
className: 'input-prompt',
focusDefault: '' //'http://'
};
var not_edited = function(el) {
return ( (el.val() == '')
|| (el.val()==el.data('prompt'))
|| (options.focusDefault && el.val()==options.focusDefault)
);
}
var focus = function() {
var input = $(this);
if (!input.data('edited'))
input.val( options.focusDefault ? options.focusDefault : '');
input.removeClass(options.className);
};
var blur = function() {
var input = $(this);
if ( not_edited(input) ) {
input
.data('edited', false)
.addClass(options.className);
if ( options.focusDefault && input.val() == options.focusDefault )
; // do nothing
else
input.val( input.data('prompt') );
}
else
input.data('edited', true);
};
// called before submit, clear input if not edited
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