jQuery: при фокусировке в текстовой области, удаление текста по умолчанию + изменение цвета, при отмене фокуса - вернуть текст обратно - PullRequest
Новая
       8

jQuery: при фокусировке в текстовой области, удаление текста по умолчанию + изменение цвета, при отмене фокуса - вернуть текст обратно

3 голосов
/ 03 сентября 2010

Это очень распространенный сценарий использования, который мы видим в stackoverflow, facebook и т. Д.

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

Какой самый простой способ сделать это через JQuery?Это похоже на довольно распространенный вариант использования

Ответы [ 5 ]

3 голосов
/ 03 сентября 2010

То, что вы ищете, обычно называется «водяным знаком» - и вы правы, это очень распространено. Существует несколько плагинов jQuery, которые могут выполнять только то, что вы просите.

Например: http://code.google.com/p/jquery-watermark/

3 голосов
/ 03 сентября 2010

Вот и мы - фрагмент на jsfiddler.net

JQuery: 

$(function() {
    $('#placeholderText').val("Placeholder")
        .focusin(function(){
            if($(this).hasClass('initialClass'))
                $(this).removeClass('initialClass').
                    addClass('normalClass').val('');                
        })
        .focusout(function(){
            if($(this).hasClass('normalClass') && $(this).val() == '')
                $(this).removeClass('normalClass').
                    addClass('initialClass').val('Placeholder');    
        });
});

CSS: 

.initialClass {
    color: #999999;
}

.normalClass {
    color: #000000;
}

HTML: 

Click on me: <input id="placeholderText" type="text" class="initialClass" />
3 голосов
/ 03 сентября 2010

Я использую этот простой скрипт в поиске: 

$(document).ready(function () {

    searchInput = $('#search-input');
    searchDefault = 'Please enter text';

    searchInput.click(function () {
        if($(this).val() == searchDefault)
            $(this).val('');
    });

    searchInput.blur(function () {
        if($(this).val() == '')
            $(this).val(searchDefault);
    });

});

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

1 голос
/ 03 сентября 2010

Если текст инструкции находится внутри области текста, вы можете использовать плагин toggleVal. Я не использовал плагин jquery watermark, может быть, лучше взглянуть на оба. http://jquery.kuzemchak.net/toggleval.php

HTML: 

<label for="field1">Some text to explain the text area.</label>
<textarea id="field1" name="textarea1"></textarea>

CSS: 

.toggleval {
  font-style: italic;
  color:#333;
}
.tv-changed, .tv-focused {
  font-style: normal;
  color:#000;
}

Javascript:
$('.toggle').toggleVal({
    populateFrom: "label",
    removeLabels: true
});
0 голосов
/ 23 января 2015

В дополнение ко всем хорошим советам, приведенным выше, я считаю, что что-то похожее на приведенные ниже работает нормально для простых сайтов ... 

 $(this).focusin(function () {
       }).focus(function () {
             if ($(this).val() == 'Enter a comment') {
                  $(this).select();
             }
          }).val("Enter a comment").select();
 });
...