Valore di dissolvenza del testo all'interno del campo di testo usando jQuery

Question

Non sono del tutto sicuro che sia possibile o meno, sono piuttosto esperto quando si tratta di jQuery e JavaScript in generale, ma questo mi ha bloccato. Ho creato un semplice plug-in che cancella un input di testo su focus e quindi visualizza il valore predefinito se non è stato inserito nulla.

È possibile dissolvere solo il testo stesso all'interno del testo immesso, e non l'intero campo stesso? Tutti i tentativi sembrano far sì che il campo di testo stesso si dissolva e alla fine nascondano l'elemento dalla vista.

Ho trovato una soluzione per l'utilizzo di span contenenti il ​​valore predefinito e posizionandoli in modo assoluto sull'input del testo, nascondendoli e mostrandoli a seconda che un utente abbia inserito un testo o meno. Preferirei un approccio molto semplice se ne esiste uno.

Modifica

Utilizzando la jQuery funzione che è in jQuery UI o disponibili come plugin per jQuery animare, è possibile animare il colore del testo per essere il colore dell'ingresso sulla messa a fuoco e la sfocatura del campo (come sottolineato di seguito). Ecco il codice che sto usando nel caso in cui volessi sapere come.

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

Solo un pensiero rapido, hai provato con il metodo di animazione per modificare il colore del testo nella casella di testo per abbinare il fondo? Quindi, al termine dell'animazione, è possibile cancellare i contenuti.

È un pensiero. È passato un po 'di tempo da quando ho usato le animazioni, ma potrei probabilmente creare un esempio di codice se sei interessato.

Answer 2

ecco cosa uso esattamente per questo. prima aggiungere questo alla tua JavaScript include: http://plugins.jquery.com/project/color

quindi fare questo:

$('.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'); 
    } 
}); 

cosa farà è sbiadire il testo al colore di sfondo e quindi svuotare il campo di inserimento. e su sfocatura mostra prima il testo predefinito, quindi lo dissolve nuovamente al suo colore originale.

un'illusione :)

è possibile rimuovere un sacco di questo se non si desidera cancellare in realtà il campo. ma tu hai l'idea. la chiave qui sono due cose. usa il plug-in del colore e l'effetto .animate().

Answer 3

Mi sono appena imbattuto in questo problema, la mia soluzione è abbastanza semplice, basta cambiare l'attributo "valore" a "". Questo essenzialmente sostituirà il testo con niente.

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