jQuery wartość wejściowa fokus i rozmycie

Question

Mam następujący kod, więc gdy użytkownik wybierze pole wprowadzania wartość zniknie, ale wartość domyślna zostanie ponownie wstawione, gdy użytkownik kliknie go.

 $(function() { 
      var defaultText = ''; 
      $('input[id=input]').focus(function() { 
       defaultText = $(this).val(); 
       $(this).val(''); 
      }); 
      $('input[id=input]').blur(function() { 
       $(this).val(defaultText); 
      }); 
     }); 

Jednak nie jest to dokładnie to, jak tego chcę. Jeśli użytkownik wstawi tekst, nie chcę, aby domyślny tekst zastąpił to, co użytkownik umieścił. Jestem również całkiem nowym użytkownikiem jQuery, więc każda pomoc będzie bardzo doceniana.

Answer 1

W swojej metodzie focus() należy sprawdzić, czy jest równa defaultText przed usunięciem go, w swojej funkcji blur(), wystarczy sprawdzić czy val() jest pusty przed ustawieniem defaultText. Jeśli zamierzasz pracować z wieloma wejściami, lepiej użyć klasy niż ID, więc Twój selektor będzie input.input, gdy klasa będzie "wejściowa". Nawet jeśli był to identyfikator, można to nazwać jako input#input.

// run when DOM is ready() 
$(document).ready(function() { 
    $('input.input').on('focus', function() { 
     // On first focus, check to see if we have the default text saved 
     // If not, save current value to data() 
     if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val()); 

     // check to see if the input currently equals the default before clearing it 
        if ($(this).val()==$(this).data('defaultText')) $(this).val(''); 
    }); 
    $('input.input').on('blur', function() { 
     // on blur, if there is no value, set the defaultText 
     if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    }); 
}); 

Ustaw go w akcji pod numerem this jsFiddle.

Answer 2

W swojej obsługi rozmycia po prostu sprawdzić, czy użytkownik nie pisać nic, w takim przypadku umieścić z powrotem domyślny tekst, tak:

  $('input[id=input]').blur(function() { 
      if ($(this).val() == '') { 
       $(this).val(defaultText); 
      } 
     }); 

Answer 3

Stary pytanie + Nie lubię, kiedy ludzie oferują inne rozwiązanie zamiast rozwiązania mojego problemu, ale mimo to: użycie atrybutu zastępczego HTML z wtyczką jQuery rozwiązałoby problem.

Można również użyć atrybutów danych HTML i zapisać/odczytać z tego.