[jQuery] wartosc input-a Opcje

[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?

Ten post edytował lord_t 25.02.2009, 22:43:07

[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:

[HTML] pobierz, plaintext 
<input type="text" id="search" title="Szukane słowo..." />
[HTML] pobierz, plaintext 

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

Ten post edytował lord_t 26.02.2009, 10:43:24

[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 (IMG:style_emoticons/default/smile.gif)

[PHP] pobierz, plaintext 
$('input').focus(function() {
 
         var sOldValueInput = $(this).attr('value');
 
        $(this).attr('value', '');
 
        if($(this).blur(function(){
 
            if($(this).attr('value')=='')
                $(this).attr('value', sOldValueInput);
 
        }));
    });
[PHP] pobierz, plaintext 

Pozdrawiam (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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

Ten post edytował martq 12.01.2010, 10:00:19

[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 (IMG:style_emoticons/default/smile.gif) a powinno wrócić do "Domki" (IMG:style_emoticons/default/smile.gif) Jakieś pomysły ?(IMG:style_emoticons/default/snitch.gif)