вход, текстовая область стилизации после смены текста?

У меня есть текстовая область/вход [тип = текст]. Я хочу изменить свой цвет фона, если кто-то щелкнет в текстовой области. Это происходит со входом: фокусвход, текстовая область стилизации после смены текста?

до сих пор это нормально, но я хочу, чтобы этот стиль оставался, если пользователь меняет или вводит какой-либо текст .. if пользователь ничего не вводить его цвет фона будет обратно на белый ... если набраны некоторый текст цвета фона будет оставаться красным ... У меня возникли проблемы со второй частью ... моего пример HTML

<input placeholder='What should I call you?' type='text'>

css я пытаюсь ..

 input:focus, input.active, 
    select:focus, 
    select.active, 
    textarea:focus, 
    textarea.active { 
     background: red; 
     } 
input{ 
background:white; 
}

источник

2016-02-21 Theprash

Похоже стиль проверки (добавляет класс ошибки, если введено недопустимое, в противном случае добавляет действительный класс, если он соответствует вашим критериям), посмотрите на [jQuery.validate] (HTTP: // jqueryvalidation.org/) – Aziz

++ вы должны учитывать, когда пользователь вводит текст или удалить текст из ввода, когда пользователь вводит что-то фон должен получить цвет, но когда пользователь удален этот текст он должен обратно на белый , не только на focus или blur. вы должны использовать jquery, потому что css не может понять, есть ли какой-либо текст в поле или нет.

$('#myInput').focus(function(){ 
$(this).css('backgroundColor','red'); 
}); 

$('#myInput').blur(function(){ 
if($(this).val().length > 0) { 
$(this).css('backgroundColor','red'); 
} else { 
$(this).css('backgroundColor','white'); 
} 
});

JSFiddle

источник

2016-02-21 09:02:27 Pedram

Спасибо, что мне нужно ... – Theprash

у вас есть пытался использовать событие onChange?

W3Schools onChange

Посмотрите этот plunker - это то, что вы пытаетесь достичь?

// Code goes here 
 

 
function changed(element){ 
 
    element.style.background = 'red'; 
 
};

/* Styles go here */ 
 

 
input:focus, input.active, 
 
    select:focus, 
 
    select.active, 
 
    textarea:focus, 
 
    textarea.active { 
 
     background: red; 
 
     } 
 
input{ 
 
background:white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <input placeholder='What should I call you?' type='text' onChange=changed(this)> 
 
</body> 
 

 
</html>

источник

2016-02-21 08:37:58

Эй, спасибо ... твой тоже правильный ... но он не распознает удаление текста .... :) – Theprash

вход, текстовая область стилизации после смены текста?

ответ

Смежные вопросы