Показать примерный текст в поле, а затем очистить его onblur

Question

Я пытаюсь продублировать эффект, используемый в окне поиска Firefox, где, если поле поиска не имеет фокуса (пользователь не щелкнул внутри него), оно просто говорит Google в серый текст. Затем, когда пользователь нажимает на поле, текст удаляется, и они могут заполнить свой поисковый запрос.

Я хочу использовать это для предоставления примера данных поля для веб-формы.

Синтаксис JQuery предпочтительнее обычного javascript, но обычный JS тоже подойдет.

Спасибо, Hive Mind!

Answer 1

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

Просто взбил это для тебя. Я уверен, что jQuery сделает его меньше, но я им не пользуюсь.

Answer 2

Этот метод настолько широко используется, что теперь он явно поддерживается в спецификации HTML через атрибут placeholder тега input:
Атрибут заполнителя HTML

Он уже поддерживается в большинстве браузеров , а для старых есть плагин jquery, обеспечивающий реализацию shim, которая может можно найти здесь .

Для оформления текста-заполнителя обратитесь к нему (включая примеры в реальном времени):
Стили заполнителя HTML5 с помощью CSS

Answer 3

Другой способ - использовать CSS, создать изображение с нужным фоновым текстом и установить его в качестве фонового изображения текстового поля, а затем, когда текстовое поле получит фокус, вы можете переключать стили, чтобы удалить фоновое изображение.

Answer 4

Реализация JQuery

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Answer 5

Зачем кататься самостоятельно? Используйте этот плагин .

Answer 6

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

Вероятно, есть более элегантный способ сделать это, но это предполагает, что в вашем блоке нет текста при загрузке страницы. Если это так, вы можете удалить первую строку.

Я не проверял это, но оно должно работать.