Background text in input type text - html

Question

I think its a easy question, but i dont know how to search this question in google
I need a background text in a input-text field. Like: Insert Your Name.
And when i press in to the field to insert my name, the text disappears
Okay, thanks for the solution.
<input id="textfield" name="textfield" type="text" placeholder="correct" />
Now i get i second question. How can i change the color of the placeholder?
Here's my text-area:
http://jsfiddle.net/wy8cP/1/

Answer 1

Here is how you can get a placeholder using HTML5:
<input id="textfield" name="textfield" type="text" placeholder="enter something" />
EDIT:
I no longer recommend hacking together your own polyfills as I showed below. You should use Modernizr to first detect whether a polyfill is needed in the first place, and then activate a polyfill library that fits your needs. There is a good selection of placeholder polyfills listed in the Modernizr wiki.
ORIGINAL (contd):
And here is a polyfill for compatibility:
<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">
http://jsfiddle.net/q3V4E/1/
A better shim approach is to run this script on page load, and put your placeholders in the data-placeholder attribute, so your markup looks like this:
<input id="textfield" name="textfield" type="text" data-placeholder="enter something">
and your js looks like this:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = inputs[i].getAttribute('data-placeholder');
inputs[i].addEventListener('focus', function() {
if (this.value == this.getAttribute('data-placeholder')) {
this.value = '';
}
});
inputs[i].addEventListener('blur', function() {
if (this.value == '') {
this.value = this.getAttribute('data-placeholder');
}
});
}
http://jsfiddle.net/q3V4E/4/

Answer 2

HTML5 provides a placeholder attribute that addresses this particular issue. See this link for more information (JSFiddle)
<input type="text" placeholder="insert your name" />
You can always provide a non-HTML5 javascript fallback, like the one explained here, or in None jquery placeholder fallback? if you aren't using JQuery.

Answer 3

I think you are looking for HTML5 form field placeholder... :)
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

Answer 4

The jquery version of the non-html 5 accepted answer:
var inputs = $("input[type='text']", context);
$.each(inputs, function (i, obj) {
$(obj).val($(obj).attr('data-placeholder'));
$(obj).on('focus', function () {
if ($(this).val() == $(this).attr('data-placeholder')) {
$(this).val('');
}
});
$(obj).on('blur', function () {
if ($(this).val() == '') {
$(this).val($(this).attr('data-placeholder'));
}
});
});

Answer 5

Changing the color of the placeholder can be achieved with CSS:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
Source: https://css-tricks.com/almanac/selectors/p/placeholder/

Answer 6

For non-HTML5, I suggest a nice javascript solution such as toggleval.js - this allows you not to have to do every input field inline, yourself; it would be global.
http://snipplr.com/view/9077/
The script you would call to after that would be something like this:
<script type="text/javascript">
$(document).ready(function() {
// Input Box ToggleVal
$("input[type=text]").toggleVal();
$("input[type=password]").toggleVal();
});
</script>