Text that clears when you click on it

Question

I would like to know how to implement something like when you submit a question: "At least one tag, such as (css html asp.net), max 5 tags.

How can I implement something like this to enter text in html, where it partially disappeared, but when you type, it does not appear and does not fade.

I do not mind how to do it if it works.

Thank.

Answer 1

The easiest option is to use the attribute placeholder:

<input type="text" placeholder="At least one tag, such as 'html', 'asp.net', max five tags." />

JS Fiddle demo .

If cross-compatibility is a requirement, then JavaScript is also an option:

var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if (inputs[i].hasAttribute('data-hint')){
        inputs[i].value = inputs[i].getAttribute('data-hint');
            inputs[i].style.color = '#999';

        inputs[i].onclick = function(){
            this.value = '';
        };
        inputs[i].onblur = function(){
            if (this.value == '' || this.value == this.getAttribute('data-hint')){
                this.value = this.getAttribute('data-hint');
                this.style.color = '#000';
            }
        };
    }
}

JS Fiddle demo .

jQuery:

$('input:text').each(
    function(){
        $(this).val($(this).attr('data-hint'));
            $(this).css('color','#999');
    }).click(
    function(){
        $(this).val('');
            $(this).css('color','#000');
    }).blur(
    function(){
        if ($(this).val() == ''){
            $(this).val($(this).attr('data-hint'));
            $(this).css('color','#999');
        }
    });

JS Fiddle demo.

:

• (W3.org).

JavaScript:

• document.getElementsByTagName().
• element.onblur.
• element.onfocus.
• element.hasAttribute().
• element.getAttribute().
• element.style.

JQuery

• (:text) .
• .each().
• .val().
• .css().
• .attr().

Answer 2

<input type="text" name="booga" placeholder="This is default text" />

Answer 3

<input type="text" placeholder="Your text here" />

Requires a modern browser, but does not use any code.

Answer 4

<input type="text" placeholder="Default text goes here..."/>

As @Kolink's answer explains, this requires an updated browser, but it doesn't use code at all.