связать <textarea> с кнопкой
Помогите пожалуйста новичку!
Не прошу писать весь код, просто направьте в нужную сторону Есть <textarea id='message' placeholder='hello!'></texarea> и кнопка <div id='button'>Send</div> Какой код нужен для того, чтобы при вводе в <textarea> текста кнопка меняла свой цвет. Спасибо |
Цитата:
Цитата:
Цитата:
Как вариант: - используй обработчик onkeyup на textarea - читай значение текста в textarea - анализируй это значение и добавляй или убирай специальный класс (типа on|off) у ДИВа с id='button' |
stormur,
Например, написать обработчик для textarea по событию oninput, в котором менять для div style.backgroundColor. Можно с учетом количества введенных символов. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#button{
width: 150px;
border: 1px solid gray;
}
</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
<script>
var col = 1111;
document.querySelector('#message').onkeypress=e=>{
col++;
document.querySelector('#button').style.backgroundColor = '#'+ col .toString(16);
};
</script>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#button{
width: 150px;
border: 1px solid gray;
background-color: red;
}
</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
<script>
document.querySelector('#message').onkeypress=e=>document.querySelector('#button').style.backgroundColor = 'green';
</script>
</body>
</html>
|
j0hnik,
А если очистить textarea после заполнения, то кнопка все равно зеленая... |
j0hnik,
И еще: обработчик onkeypress реагирует только на клавиатуру, а oninput и на копипаст тоже. |
Dilettante_Pro,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#button{
width: 150px;
border: 1px solid gray;
background-color: red;
}
</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
<script>
document.querySelector('#message').oninput=e=>document.querySelector('#button').style.backgroundColor = e.target.value?'green':'red';
</script>
</body>
</html>
|
j0hnik,
Красота:victory: |
| Часовой пояс GMT +3, время: 07:46. |