Постепенно исчезните текстовое значение в текстовом поле с помощью jQuery
Я не совсем уверен, возможно ли это или нет, я довольно хорошо осведомлен когда дело доходит до jQuery и JavaScript в целом, но этому озадачили меня. Я создал простой плагин, который очищает ввод текста на фокусе и затем отображает значение по умолчанию, если ничто не было введено.
Действительно ли возможно постепенно исчезнуть просто сам текст во вводе текста а не самом целом поле? Все попытки, кажется, приводят к самому текстовому полю, постепенно исчезающему и в конечном счете скрывающему элемент от представления.
Я действительно предлагал решение использования промежутков, содержащих значение по умолчанию и абсолютно располагающих их над вводом текста, скрываясь и показывая им зависящий, если пользователь ввел какой-либо текст или нет. Я быть очень бы много простого подхода, если Вы существуете.
Править
Используя анимационную функцию jQuery, которая находится в jQuery UI или доступный как плагин для 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);
}
});
2 ответа
Небольшая мысль: вы пробовали использовать метод анимации для изменения цвета текста в текстовом поле в соответствии с фоном? Затем, когда анимация завершится, вы сможете очистить содержимое.
Это мысль. Я уже давно не использовал анимацию, но я мог бы сделать пример кода, если вам интересно.
вот что я использую именно для этого. Сначала добавьте это в JavaScript includes: 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');
}
});
что это сделает, так это затухание текста до цвета фона, а затем опустошение поля ввода. и при размытии сначала покажите текст по умолчанию, а затем затушите его до первоначального цвета.
иллюзия :)
вы можете убрать многое из этого, если не хотите очищать поле. но вы поняли идею. ключевыми здесь являются две вещи. используйте плагин color и эффект .animate().