33

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/

6 Answers6

49

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/

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • One potential problem (not very likely, but still) when doing a change of the value is that the user typed the exact word(s) of representing the placeholder, and it will be lost. Also when you have a password you need to convert the input from password to text and back along the way... – Alexis Wilke Mar 20 '17 at 23:28
  • is there some way to show the remaining placeholder so it doesn't go away as you start typing? – Michael Apr 21 '17 at 17:51
  • @Michael I'm not sure what you mean. Do you want "er something" to remain visible once you've typed "foo"? – Asad Saeeduddin Apr 21 '17 at 18:39
  • Yes. Although in my case the placeholder is something more like "XXX-YY-ZZZZ" where X, Y, and Z have specific meanings to the user. Looks like there is no "built-in" way to do this? – Michael Apr 21 '17 at 18:59
  • @Michael Ah. This is called input masking, and there's a whole different set of libraries/articles etc. for that. It's fairly easy to implement, but there's nothing built in. – Asad Saeeduddin Apr 21 '17 at 19:46
4

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.

Community
  • 1
  • 1
Xavi López
  • 27,550
  • 11
  • 97
  • 161
  • Cool! Like this yes! But now, the color of the placeholder is too dark... how can i change the color of that? –  Oct 25 '12 at 15:22
  • 1
    See [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/q/2610497/851811). – Xavi López Oct 25 '12 at 15:24
  • woow. so much upvotes :P cool thank you. mark you as accept answer for answer both question first,,, in two minutes –  Oct 25 '12 at 15:30
2

I think you are looking for HTML5 form field placeholder... :)

http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

Pallykuma
  • 66
  • 2
1

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'));
            }
        });
    });
willDaBeast
  • 120
  • 6
1

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/

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
0

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>
Andy
  • 1,123
  • 6
  • 9