panzi/input-demo.html

## input-demo.html
<!DOCTYPE html>
<html>
<head>
<title>Input Demo</title>
<!--
	This is an example on how to create a text input/textarea with a
	nice description on what to enter in case nothing is entered.

	It uses Prototype for DOM navigation and updating an elements
	class name, but it should be easy to port to any other JavaScript
	framework.
-->
<script type="text/javascript"
	src="http://www.prototypejs.org/javascripts/prototype.js"></script>
<style type="text/css">
/* We wrap the text input/textarea in another element with this
 * class: */
.input {
	/* We use position:absolute on the element used for the title
	 * text so this element has to define this: */
	position: relative;

	display:-moz-inline-stack;
	display:inline-block;
	/* IE hack:
	 * IE < 9 does not support inline-block, but when using inline
	 * and forcing IE to add a layout to the element (using zoom:1)
	 * it behaves like inline-block for every other browser.
	 * But because inline in other (standard compliant) browsers
	 * behaves differently We use a specially broken syntax that
	 * only IE can interprete. */
	*zoom:1;
	*display:inline;

	/* This is needed to crop the title if it is to big: */
	overflow: hidden;

	/* Just a few styles to let it look nice: */
	border: 1px solid black;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 0;

}

.input input,
.input textarea {
	/* Just so we are sure how it behaves: */
	display: block;

	/* The browsers focus effect would look wrong if we heavily
	 * style the wrapper: */
	outline: none;

	/* So that it shares the background of the parent element: */
	background: transparent;

	/* Just a few styles to let it look nice: */
	border-style: none;
	margin: 0;
	padding: 5px;
}

.input textarea {
	/* For older IEs: */
	overflow: auto;
}

.input .title {
	/* The title element shall span the whole wrapper element: */
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	/* WebKit and Gecko (Firefox) based browsers show a resize
	 * handle for textareas. But because we put the title element
	 * over it it would be unusable. This mekes sure all mouse
	 * events get to it: */
	-moz-pointer-events: none;
	pointer-events: none;

	/* Just to be sure the right mouse cursor is used: */
	cursor: text;

	/* Just a few styles to let it look nice: */
	padding: 5px;
	margin: 0;
	color: #777777;

}

/* Because we use the wrapper element for styles we cannot use the
 * :focus pseudo class. IE doesn't support it anyway. */
.input.focus {
	background-color: #eeeeee;
}

</style>
<script type="text/javascript">
// <!--
// The title element shall be hidden when the input gets the focus:
function focus_input (element) {
	$(element).down('.title').style.display = 'none';
	element.addClassName('focus');
}

// The title element shall be shown again if the input is empty and
// the focus is lost:
function blur_input (element) {
	var input = $(element).down('.value');
	if (input.value.strip().length === 0) {
		input.value = '';
		element.down('.title').style.display = '';
	}
	element.removeClassName('focus');
}

// This is a helper function which you can use to change the value
// of such an input element. It is not used in this example.
function set_value (input, value) {
	if (value.strip().length === 0) {
		input.value = '';
		var element = input.up();
		if (element && !element.hasClassName('focus')) {
			element.down('.title').style.display = '';
		}
	}
	else {
		input.value = value;
	}
}
// -->
</script>
</head>
<body>

<!--
	An input element styled this way can be used inline like any
	other input element.
-->
<p>Foo bar baz <span class="input">
<!--
	We need the onclick handler here for browsers that do not
	support pointer-events:none (i.e. IE):
-->
<span class="title"
	onclick="$(this).up('.input').down('.value').focus();">Enter
text here...</span>
<input type="text" class="value"
	onfocus="focus_input($(this).up('.input'));"
	onblur="blur_input($(this).up('.input'));"/>
</span> egg bacon and spam.</p>

<!--
	Textareas work the same.
	Please note that under different browsers inline textareas
	behave a bit differently. Under some they extend above the line,
	under others they extend below.
-->
<p>Egg bacon <span class="input">
<span class="title"
	onclick="$(this).up('.input').down('.value').focus();">Enter a
multiline text here that might be quite long, just like this text
here is...</span>
<textarea class="value"
	onfocus="focus_input($(this).up('.input'));"
	onblur="blur_input($(this).up('.input'));"></textarea>
</span> tomato and spam.</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Input Demo</title>
	<!--
	This is an example on how to create a text input/textarea with a
	nice description on what to enter in case nothing is entered.

	It uses Prototype for DOM navigation and updating an elements
	class name, but it should be easy to port to any other JavaScript
	framework.
	-->
	<script type="text/javascript"
	src="http://www.prototypejs.org/javascripts/prototype.js"></script>
	<style type="text/css">
	/* We wrap the text input/textarea in another element with this
	* class: */
	.input {
	/* We use position:absolute on the element used for the title
	* text so this element has to define this: */
	position: relative;

	display:-moz-inline-stack;
	display:inline-block;
	/* IE hack:
	* IE < 9 does not support inline-block, but when using inline
	* and forcing IE to add a layout to the element (using zoom:1)
	* it behaves like inline-block for every other browser.
	* But because inline in other (standard compliant) browsers
	* behaves differently We use a specially broken syntax that
	* only IE can interprete. */
	*zoom:1;
	*display:inline;

	/* This is needed to crop the title if it is to big: */
	overflow: hidden;

	/* Just a few styles to let it look nice: */
	border: 1px solid black;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 0;

	}

	.input input,
	.input textarea {
	/* Just so we are sure how it behaves: */
	display: block;

	/* The browsers focus effect would look wrong if we heavily
	* style the wrapper: */
	outline: none;

	/* So that it shares the background of the parent element: */
	background: transparent;

	/* Just a few styles to let it look nice: */
	border-style: none;
	margin: 0;
	padding: 5px;
	}

	.input textarea {
	/* For older IEs: */
	overflow: auto;
	}

	.input .title {
	/* The title element shall span the whole wrapper element: */
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	/* WebKit and Gecko (Firefox) based browsers show a resize
	* handle for textareas. But because we put the title element
	* over it it would be unusable. This mekes sure all mouse
	* events get to it: */
	-moz-pointer-events: none;
	pointer-events: none;

	/* Just to be sure the right mouse cursor is used: */
	cursor: text;

	/* Just a few styles to let it look nice: */
	padding: 5px;
	margin: 0;
	color: #777777;

	}

	/* Because we use the wrapper element for styles we cannot use the
	* :focus pseudo class. IE doesn't support it anyway. */
	.input.focus {
	background-color: #eeeeee;
	}

	</style>
	<script type="text/javascript">
	// <!--
	// The title element shall be hidden when the input gets the focus:
	function focus_input (element) {
	$(element).down('.title').style.display = 'none';
	element.addClassName('focus');
	}

	// The title element shall be shown again if the input is empty and
	// the focus is lost:
	function blur_input (element) {
	var input = $(element).down('.value');
	if (input.value.strip().length === 0) {
	input.value = '';
	element.down('.title').style.display = '';
	}
	element.removeClassName('focus');
	}

	// This is a helper function which you can use to change the value
	// of such an input element. It is not used in this example.
	function set_value (input, value) {
	if (value.strip().length === 0) {
	input.value = '';
	var element = input.up();
	if (element && !element.hasClassName('focus')) {
	element.down('.title').style.display = '';
	}
	}
	else {
	input.value = value;
	}
	}
	// -->
	</script>
	</head>
	<body>

	<!--
	An input element styled this way can be used inline like any
	other input element.
	-->
	<p>Foo bar baz <span class="input">
	<!--
	We need the onclick handler here for browsers that do not
	support pointer-events:none (i.e. IE):
	-->
	<span class="title"
	onclick="$(this).up('.input').down('.value').focus();">Enter
	text here...</span>
	<input type="text" class="value"
	onfocus="focus_input($(this).up('.input'));"
	onblur="blur_input($(this).up('.input'));"/>
	</span> egg bacon and spam.</p>

	<!--
	Textareas work the same.
	Please note that under different browsers inline textareas
	behave a bit differently. Under some they extend above the line,
	under others they extend below.
	-->
	<p>Egg bacon <span class="input">
	<span class="title"
	onclick="$(this).up('.input').down('.value').focus();">Enter a
	multiline text here that might be quite long, just like this text
	here is...</span>
	<textarea class="value"
	onfocus="focus_input($(this).up('.input'));"
	onblur="blur_input($(this).up('.input'));"></textarea>
	</span> tomato and spam.</p>

	</body>
	</html>