Проверка заполнения текста входного типа

#javascript #jquery #forms #css

#javascript #jquery #формы #css

Вопрос:

У меня есть форма с текстом типа ввода. Вот так:

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

Но теперь мой вопрос. Обычно текст в текстовых полях отображается серым цветом. Но когда вы заполнили поле. Цвет должен быть черным. Как я могу проверить это с помощью javascript?

Спасибо

Ответ №1:

Я думаю, вы имели в виду, что нам нужно цветовое поле только тогда, когда пользователь закончил писать…. Если да, то вам нужно использовать этот алгоритм:

 $('#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
    }
});

Ответ №2:

Вы можете использовать .change функцию в jquery, чтобы изменить цвет на черный, когда пользователь вводит что-то, и курсор перемещается за пределы текстового поля.

Пример:

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

    $(this).css('color', 'black');
});

1. Правильно, но я думаю, что OP означает «изменить цвет, только если поле имеет значение», поэтому вам нужно добавить if (this.value.length > 0) и в else части изменить цвет обратно на серый.

Ответ №3:

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

определите вашу функцию changeColor(), которая изменит цвет текста в текстовом поле.

Ответ №4:

Событие изменения запускается, если вы оставляете поле ввода (при размытии). Если вы хотите иметь мгновенную проверку, используйте событие ввода:

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

использование селектора идентификаторов выполняется быстрее, чем селектора атрибутов

Ответ №5:

Это применит это правило ко всем элементам с требуемым классом.

 $('.required').blur(function () {
    if ($(this).val().trim().length == 0) 
        $(this).css('color','black');
    else 
        $(this).css('color','gray');
  });