Есть текст, который очищается при нажатии на него - PullRequest
Новая
       0

Есть текст, который очищается при нажатии на него

5 голосов
/ 12 ноября 2011

Я хотел бы знать, как реализовать что-то вроде переполнения стека при публикации вопроса: «Как минимум один тег, например (css html asp.net), максимум 5 тегов.

Как я могу реализоватьчто-то вроде этого для ввода текста в html, где он частично блеклый, но при вводе он не отображается и не блекнет.

Я не против, как это сделать, так какПока это работает.

Спасибо.

Ответы [ 4 ]

7 голосов
/ 12 ноября 2011

Самый простой вариант - использовать атрибут placeholder: 

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

Демонстрация JS Fiddle .

Если требуется перекрестная совместимость, тогда JavaScriptтакже опция: 

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 .

Или с 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.

Ссылки:

Vanilla JavaScript:

jQuery:

5 голосов
/ 12 ноября 2011 
<input type="text" name="booga" placeholder="This is default text" />
4 голосов
/ 12 ноября 2011 
<input type="text" placeholder="Your text here" />

Требуется современный браузер, но не используется какой-либо код.

2 голосов
/ 12 ноября 2011 
<input type="text" placeholder="Default text goes here..."/>

Как объясняет ответ @ Kolink, для этого требуется современный браузер, но совсем не используется код.

...