связать <textarea> с кнопкой [дубликат]

228

12 января 2018, 23:46

На данный вопрос уже ответили:

Изменение цвета кнопки button при заполнении полей text и password 3 ответа

Есть

<textarea id='message' placeholder='hello!'></texarea>

и кнопка

<div id='button'>Send</div>

Какой код нужен для того, чтобы при вводе в текста кнопка меняла свой цвет?

Answer 1

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>

Это если без уточнения, как именно должна менять, на какой цвет и т.д.

Answer 2

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>

Answer 3

Возможно так, тут Ваша разметка и Ваши 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Верстка изогнутого блока

Добрый день, может кто подсказать сверстать такой блок а точнее эту изогнутую шапку на блоке?

287

CSS

Разрыв страницы как в pdf файла

Нужно сверстать HTML-страницу, чтобы она была разделена на страницы, как в PDF файлах(по блокам, чтоб при её печатим было формата А4, например),между...

225

CSS

GitHub как хостинг

Сделал репозиторию на сайте github залил туда все файлы с кодомНачал запускать ссылку, а там ошибка 404

247

CSS

Позиционирование элементов с помощью css

Как с помощью CSS разместить элементы так, как указано на картинке ниже? Мне нужно чтобы круги с датой располагались четко в центре, а слева...

248