Есть
<textarea id='message' placeholder='hello!'></texarea>
и кнопка
<div id='button'>Send</div>
Какой код нужен для того, чтобы при вводе в текста кнопка меняла свой цвет?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуUPD:
Под нажимом профессиональной общественности обновляю ответ (теперь цвет меняется не от любого нажатия кнопок, а только если в поле вводится текст + если текст удалить бэкспейсом, цвет возвращается в исходное состояние):
$('#message').keyup(function(){
if($(this).val() != 0) {
$('#button').css('background-color', 'red');
}
else {
$('#button').css('background', 'none');
}
});
#button {
width: 32px;
padding: 5px;
text-align: center;
}
<textarea id='message' placeholder='hello!'></textarea> <br />и кнопка <div id='button'>Send</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
первый вариант
В самом общем виде можно сделать так:
$('#message').keydown(function(){
$('#button').css('background-color', 'red');
});
#button {
width: 32px;
padding: 5px;
text-align: center;
}
<textarea id='message' placeholder='hello!'></textarea> <br />и кнопка <div id='button'>Send</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
Это если без уточнения, как именно должна менять, на какой цвет и т.д.
Возможно так, тут Ваша разметка и Ваши id, class'ы
$('#textarea').bind('input propertychange', function() {
$("#btn").addClass('active');
});
#btn.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<button id="btn">Button</button>
document.querySelector('textarea').addEventListener('input', () => {
if (document.querySelector('textarea').value !== '') {
document.querySelector('#button').style.background = 'red';
} else {
document.querySelector('#button').style.background = 'white';
}
})
#button {
width: 32px;
padding: 5px;
text-align: center;
}
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
id='button'