Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] wartosc input-a
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kicaj
Napisalem cos takiego (opis w komentarzach):
Kod
$('#right-search').focus(function() {
    // domyslanie ustawiona jest wartosc dla input-a (value="szukaj...")
    // podczas klikniecia, czyscimy jego wartosc
        $(this).attr('value', '');
        if($(this).blur(function() {
            // ustawiamy wartosc po opuszczeniu input-a
            $(this).attr('value', 'szukaj...');
        }));
    });

Jesli klikam w input-a to czysci jego domyslna wartosc

Pytanie: Jesli po kliknieciu w intput-a, i nic nie wpisaniu, a nastepnie opuszczenie jego spowoduje wpisanie domyslnej wartosci "szukaj...", jezeli jednak cos wpiszemy i opuscimy to wstawia sie ta wartosc, a powinna zostac nowo wpisana, wiec jak to zrobic?

if(opuszczamy.pusty) : ustaw domyslny tekst ? pozostaw wpisany tekst...
lord_t
Kod
if($(this).attr('value')=="")
  $(this).attr('value', 'szukaj...');


To było takie trudne O_o?
kicaj
Gotowe rozwiazanie
Kod
$('#search').attr('value', $('#search').attr('title')).focus(function() {
                    $(this).attr('value', '');
                    
                    $(this).blur(function() {
                        if($(this).attr('value') == '') {
                            $(this).attr('value', $(this).attr('title'));
                        }
                    });
                });

oraz:
  1. <input type="text" id="search" title="Szukane słowo..." />


Poki jedyny minus to powtarzanie nazwy identyfikatora (#search) w 1. linijce, niestety tutaj nie dziala 'this'...

Pomysl?
lord_t
Nie ma się czym przejmować, ale jeśli Ci to tak przeszkadza to możesz sobie przypisać $("#twojeId") do np. zmiennej tmp.
kicaj
A jak zrobic zeby TYLKO kiedy jest kursor w uzyciu kolor tekstu w input byl np. czerwony?
lord_t
Przy skupieniu na inpucie (onfocus) musisz go sobie zmienić cssem, a na onblur przywrócić poprzedni.
kicaj
Okey, to juz mniejwiecej wiem jak pobrac jakis kolor, ale jak w blur() wrocic to jego pierwotnej wartosci (kolor ktory byl ustawiony pierwotnie)?
lord_t
Np. zmieniając klasy (toggleClass()).

edit[dotyczy postu ponizej]:

Orkan, nie jest tak jak piszesz, hover różni się od efektu który chce uzyskać kicaj
Orkan
ps. funkcja $.hover(in,out) jest do tego wlasnie
Rafal Filipek
wracając jeszcze do pierwszego problemu:
1) ustawiając wartość pola input należy korzystać z $('input').val() - jest szybsze
2) definiowanie ewentów w eventach nie jest dobrym pomyslem bo przykładowo:
Kod
<input type="text" id="search" title="Szukaj..." />
<span id="log"></span>
<script>
$('#search').focus(function(){
  $(this).blur(function(){
    $('#log').html($('#log').html()+'1<br />');
  });
});
</script>

wywolaj focus i blur pare razy i zobacz jakie ilosci jedynek bedzie ci zwracal - coraz wiecej!
3) sam kod który napisałeś można troche skompresować korzystając ze smaczków js i jquery
Kod
$('#search').val($('#search').attr('title')).bind('focus blur', function(e){
  var $this = $(this), val = $this.val(), title = $this.attr('title');
  $this.val(e.type=='focus' ? (val==title ? '' : val) : (val=='' ? title : val))
});

co do pytania 2. jezeli chcesz wprowadzic wiecej modyfikacji pola niz tylko kolor ( np. obramowanie, czcionka itp ) to lepiej uzyc dodawania i usuwania z elementu klass css ( addClass i removeClass ). Natomiast to o czym piszesz.
Kod
$('#search').focus(function(){$(this).css('color','#990000')})
            .blur(function(){$(this).css('color', $(this).attr('default-color'))})
            .attr('default-color',$('#search').css('color'));

i powinno smigac. do kazdego elementu mozesz dodawac wlasne atrybuty, ktrore przydaja sie wlasnie np. w takich sytuacjach.
martq
Zajrzałem, a że troszkę się pobawiłem to napisałem taki uniwersalny skrypcik i może komuś się przyda smile.gif
  1. $('input').focus(function() {
  2.  
  3. var sOldValueInput = $(this).attr('value');
  4.  
  5. $(this).attr('value', '');
  6.  
  7. if($(this).blur(function(){
  8.  
  9. if($(this).attr('value')=='')
  10. $(this).attr('value', sOldValueInput);
  11.  
  12. }));
  13. });

Pozdrawiam smile.gif
pp-layouts
$('input').attr('value') to zło. $('input').val() jest ok, dlatego, że $('input').attr('value') często nie uwzględnia zmian aktualnej wartości elementu. Straciłem dużo czasu przez to kiedyś, więc ostrzegam. Tak samo odradzam użycie $('input').attr('checked', 'checked'); Nawet $('input').attr('checked') też bym nie ufał.

Jedyny sposób na zaznaczenie checkboxa w jQuery to zrobić to bez jQuery smile.gif Czyli $('input[name=ten_wlasnie]')[0].checked = true; Co ciekawe, zaznaczanie z jQuery działa w niektórych przeglądarkach. To samo z .attr('value') - czasem działa, czasem nie - dlatego szczególnie odradzam, bo to tworzy szczególnie wredne do znalezienia i poprawiania bugi.

martq
Nie znam się aż tak na jQuery.. Ale z założenia js miał chyba działać na aktualnych wartościach zmiennych (drzewie DOM)? Z tego co piszesz wynika iż nie powinno się używać .attr() z racji tego, że nie uwzględnia aktualnych wartości, czyli jak coś zmienimy raz, może później zostać już źle odczytane?
To co napisałem działa dobrze na: FX, Opera, Chrome, IE6, IE7 i IE8.. Cóż chciałem dobrze:p
pp-layouts
Robię ostatnio dużą aplikację AJAX-ową, i miałem tam fragment, który miał odczytać wartość z inputa po naciśnięciu entera. Siedziałem godzinę i kombinowałem czemu to nie działa, okazało się, że nie czytał nic przez .attr('value'). Zmieniłem to na .val() i poszło. Z innymi atrybutami nie miałem takich problemów, tylko z tym jednym. Może to była wina jakiejś wtyczki.

martq
No okej zauważyłem taka różnicę iż: Start-> wartość input = "Szukaj" -> Klikam->Zmieniam->wartość input = "Domki" i jest ok. Klikam drugi raz-> nic nie zmieniam, czyli puste pole zostawiam->wartość input="Szukaj". Dzieje się tak w obu przypadkach smile.gif a powinno wrócić do "Domki" smile.gif Jakieś pomysły ?snitch.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.