Затухание текстового значения внутри текстового поля с помощью jQuery

Question

Я не совсем уверен, возможно ли это или нет, я достаточно хорошо осведомлен, когда дело доходит до jQuery и JavaScript в целом, но это меня озадачило.Я создал простой плагин, который очищает текстовый ввод в фокусе, а затем отображает значение по умолчанию, если ничего не было введено.

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

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

Редактировать

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

    obj.bind("focus", function() {
  if ($(this).val() == oldValue) {
      $(this).animate({ color: '#E8DFCC' }, 1000).val('');
  }
 });

 obj.bind("blur", function() {
  if ($(this).val().length <= 3) {
      $(this).animate({ color: '#56361E' }, 600).val(oldValue);
  }
 });

Answer 1

Просто подумайте, пытались ли вы использовать метод анимации, чтобы изменить цвет текста в текстовом поле, чтобы он соответствовал фону? Затем, когда анимация завершится, вы можете очистить содержимое.

Это мысль. Прошло много времени с тех пор, как я использовал анимацию, но, возможно, я мог бы собрать пример кода, если вам интересно.

Answer 2

вот что я использую именно для этого.сначала добавьте это в ваш JavaScript-код, включающий: http://plugins.jquery.com/project/color

, затем сделайте это:

$('.search-input').focus(function(){
    if($(this).val() == 'Default Text'){
        $(this).animate({
            color: '#fff'
            //your input background color.
        }, 500, 'linear', function(){
            $(this).val('').css('color','#000'); 
            //this is done so that when you start typing, you see the text again :P
        });
    }
}).blur(function(){
    if($(this).val() == ''){
        $(this).val('Default Text').css('color','#fff');
        $(this).animate({
            color: '#000'
        }, 500, 'linear');
    }
});

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

иллюзия:)

, вы можете удалить большую часть этого, если вы не хотите на самом деле очиститьполе.Но ты получил идею.ключ здесь две вещи.используйте плагин цвета и эффект .animate ().

Answer 3

Я только что столкнулся с этой проблемой, мое решение довольно простое, просто измените атрибут «значение» на «». По сути, это заменит текст ничем.

$(selector).attr('value', '');