Mam formularz z tekstem wejściowych. Lubię to:

<input type="text" placeholder="Voornaam" class="required" title="Voornaam" id="ctl00_ContentPlaceHolder1_tbFirstName" maxlength="255" value="Mike" name="ctl00$ContentPlaceHolder1$tbFirstName">

Ale teraz moje pytanie. Normalnie tekst jest szary w polach tekstowych. Ale kiedy ukończyłeś pole. Kolor musi być czarny. Jak mogę to sprawdzić za pomocą JavaScript?

Dzięki

1
Mike Vierwind 2 listopad 2011, 12:28

5 odpowiedzi

Najlepsza odpowiedź

Myślę, że masz na myśli, że potrzebujemy pola kolorów tylko wtedy, gdy użytkownik zakończył pisanie .... Jeśli tak, musisz użyć tego algorytmu:

$('#ctl00_ContentPlaceHolder1_tbFirstName').blur(function () {
    var self = $(this);
    if (self.val() != "") {
        self.css('color','black'); // Set black fore color
    }
    else {
        self.css('color','gray'); // Restore code
    }
});
3
Sergey 2 listopad 2011, 08:51

Możesz użyć funkcji .change w jQuery, aby zmienić kolor na czarny, gdy użytkownik coś wpisuje i kursor przesuwa się z pola tekstowego.

Dawny:

$("input[type='text']").change(function(){

    $(this).css('color', 'black');
});
2
Dilini Rajapaksha 2 listopad 2011, 08:35
<input type="text" onblur="changeColor()" placeholder="Voornaam" 
 class="required" title="Voornaam" id="ctl00_ContentPlaceHolder1_tbFirstName" 
 maxlength="255" value="Mike" name="ctl00$ContentPlaceHolder1$tbFirstName">

Zdefiniuj funkcję ChangeColor (), która zmieni kolor tekstu w polu tekstowym.

0
Kris 2 listopad 2011, 08:45

Zdarzenie zmiany zostanie wyzwolone, jeśli zostawisz pole wejściowe (na rozmycie). Jeśli chcesz mieć natychmiastową kontrolę, użyj zdarzenia Keyup:

$('#ctl00_ContentPlaceHolder1_tbFirstName').bind('keyup', function(){
  if (someconditionistrue) $(this).css('color','black');
});

Korzystanie z selektora ID jest szybsze niż selektor atrybutu

0
Xaver 2 listopad 2011, 08:46

Spowoduje to zastosowanie tej reguły do wszystkich elementów z wymaganą klasą.

$('.required').blur(function () {
    if ($(this).val().trim().length == 0) 
        $(this).css('color','black');
    else 
        $(this).css('color','gray');
  });
0
kamui 2 listopad 2011, 09:29