Wyczyść dane wejściowe z fokusem przy użyciu jQuery i wróć do rozmycia

Question

To prawie działa. Jednak podczas opuszczania pola pojawia się "defaulttext" zamiast oryginalnej wartości tekstowej. Nie wiem, jak najskuteczniej wywołać echo zmiennej wewnątrz defaultText.

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

Answer 1

Simpl napisać $(this).val(defaultText): bez '' s nie będzie traktować go jako zmiennej.

Answer 2

Nie jesteś przedstawieniu zmienną defaultText. Mijasz ciąg znaków, ponieważ jest on zawijany w cudzysłowy.

Answer 3

Musisz usunąć znaczniki '' wokół zmiennej defaultText w ustawionej metodzie (val).

spróbować czegoś wzdłuż linii hte z

$(function() { 
    var defaultText = ''; 
    $('input[type=text]').focus(function() { 
     defaultText = $(this).val(); 
     $(this).val(''); 
    }); 
    $('input[type=text]').blur(function() { 
     $(this).val(defaultText); // NB removed the ' ' marks 
     //echo // What are you trying to echo? 
    }); 
}); 

Answer 4

$(function() { 
    var input = $('input[type=text]'); 

    input.focus(function() { 
     $(this).val(''); 
    }).blur(function() { 
     var el = $(this); 

     /* use the elements title attribute to store the 
      default text - or the new HTML5 standard of using 
      the 'data-' prefix i.e.: data-default="some default" */ 
     if(el.val() == '') 
      el.val(el.attr('title')); 
    }); 
}); 

---

Aktualizacja

Przeglądarki są stopniowo realizacji atrybut placeholder, który zapewnia możliwość wyświetlania "wskazówkę" do użytkownik.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 5

Spróbuj to w Firebug:

$(function() { console.log($(this)) }); 

Dowiesz się, że

var defaultText = $(this).val(); 

prawdopodobnie nie jest to, co chcesz.

Jeśli wartość początkowa dla wejścia jest domyślny tekst, uzyskać to tak:

var defaultText = $('input[type=text]').val() 

Należy pamiętać, że to będzie działać poprawnie tylko wtedy, gdy istnieje tylko jeden tekst wejście na swojej stronie.

A także usunąć cytaty w:

$(this).val('defaultText'); 

Answer 6

użycie HTML5 przypisują zastępczy każdego tagu wejściowego, np:

<input type="text" value="original text value" placeholder="default value" /> 

Answer 7

To rozwiązanie wymaga jQuery!

ja owinięty tej funkcji w module utils tak:

var utils = (function() { 
    var utils = {}; 
    //some other properties... 
    utils.setupAutoclearInputs = function() { 
     $('.input-autoclear').each(function() { 
      $(this).data('default', $(this).val()).addClass('gray'); 
     }).focus(function(e) { 
      if (!($(this).val() !== $(this).data('default'))) { 
       $(this).removeClass('gray').addClass('black').data('modified', true).val(''); 
      } 
     }).blur(function(e) { 
      if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') { 
       $(this).removeClass('black').addClass('gray').val($(this).data('default')); 
      } 
     }); 
    } 
    //some other methods... 
    return utils; 
}()); 

w HTML:

Dodaj: class="input-autoclear" do każdego wejścia chcesz być włączone.

ustawić wartość domyślną: <input ... value="defaultValue" ... >

Tworzenie niektórych klas CSS dla tekstu lub cokolwiek chcesz szary i czarny.

Osobiście używam .gray { ... } i .black { ... }, ale możesz potrzebować lepszych imion.

Wreszcie:

Ogień metoda moduły utils przy użyciu:

$(document).ready(function() { 
    ... 
    utils.setupAutoclearInputs(); 
    ... 
} 

Upewnij się, że kod dla modułu mieszka poza wezwanie document.ready i prawdopodobnie zechcesz go w globalnym zakresie swojej podanie.

Aby uzyskać więcej informacji na temat właściwego pisania kodu JavaScript, odwiedź tę stronę: article.

Answer 8

var q = $('#q'); 
q.focus(function() { 
    if ($(this).attr('data-default') == $(this).val()) { 
     $(this).val(''); 
    } 
}).blur(function() { 
    if($(this).val() == '') { 
     $(this).val($(this).attr('data-default')); 
    } 
}); 


<input type="text" name="q" id="q" data-default="Search..." value="Search..."/> 

Answer 9

Ten zapisze domyślny tekst za pomocą funkcji .data(). Więc nie ma potrzeby stosowania dodatkowych znaczników.

$('input').focus(function() { 
    if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val()); 
    if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val(""); 
}).blur(function(){ 
    if ($(this).val() == "") $(this).val($(this).data("DefaultText")); 
}); 

Answer 10

$('.myclass').each(function() { 
    var default_value = this.value; 
    $(this).css('color', '#666'); // this could be in the style sheet instead 
    $(this).focus(function() { 
     if(this.value == default_value) { 
      this.value = ''; 
      $(this).css('color', '#333'); 
     } 
    }); 
    $(this).blur(function() { 
     if(this.value == '') { 
      $(this).css('color', '#666'); 
      this.value = default_value; 
     } 
    }); 
}); 
<input type="text" class="myclass" size="30" value="type here" /> 

Answer 11

To działa! Używam go osobiście:

/* Forminputs löschen und wiederherstellen */ 
jQuery(function() { 
    var input = jQuery('#userForm input[type=text], #userForm textarea'); 

    input.focus(function() { 

     jQuery(this).attr('data-default', jQuery(this).val()); 
     jQuery(this).val(''); 

    }).blur(function() { 
     var el = jQuery(this); 

     if (el.val() == '') 
      el.val(el.attr('data-default')); 
    }); 
}); 

Answer 12

Zrobiłem trochę tego kodu.

$(document).ready(function() { 
    var defaultText = ''; 
    $('.input-focus-clear').focus(function() { 
     defaultText = $(this).val(); 
     $(this).val(''); 
    }); 
    $('.input-focus-clear').blur(function() { 
     var newText = $(this).val(); 
     if (newText.length < 1) { 
      $(this).val(defaultText); 
     } 
    }); 
});