Показать пример текста в поле, а затем очистить его onblur - PullRequest
Новая
       23

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

1 голос
/ 12 ноября 2008

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

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

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

Спасибо, ТАК Улей Разум!

Ответы [ 6 ]

6 голосов
/ 12 ноября 2008 
<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 сделает его меньше, но я им не пользуюсь.

3 голосов
/ 04 февраля 2014

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

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

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

2 голосов
/ 18 октября 2012

Реализация 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>
2 голосов
/ 12 ноября 2008

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

0 голосов
/ 20 января 2011

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

0 голосов
/ 12 ноября 2008 
  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

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

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

...