2

Есть

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

и кнопка

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

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

3
  • Собственно, кнопки не вижу. Вижу только блок с id='button' 11 янв 2018 в 10:23
  • Через data-атрибуты можно.
    – user262779
    11 янв 2018 в 10:36
  • условная 'кнопка', кнопка-div. легче самому создать новую, чем кастомизировать исходную 11 янв 2018 в 10:50

3 ответа 3

3

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>

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

7
  • Спасибо огромное, совершенно не подумал о событии keydown. Всё на поверхности, как и обычно 11 янв 2018 в 10:49
  • @ЛёшаПоворознюк, если ответ помог, примите его, поставив галочку 11 янв 2018 в 10:50
  • поставил, буду знать впредь 11 янв 2018 в 10:53
  • Цвет меняется, даже если я просто нажму Ctrl с фокусом в textarea, а это никакой не ввод текста
    – andreymal
    11 янв 2018 в 11:42
  • @andreymal а Вы не жмите ctrl :) На самом деле понятно, что можно проверять textarea на ненулевой val() по keyup, да и отменять изменение цвета, если текст удалён бэкспейсом, тоже можно - но таких уточнений в задании не было 11 янв 2018 в 11:44
2

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

1
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>

5

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.