#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. Не могли бы вы уточнить значение требования «завершено»? Считается ли это текстовое поле завершенным, если его значение содержит только один символ?
Ответ №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');
});