Как реализовать: «У меня есть диалоговое окно, в котором если в textarea вводится хотя б 1 символ, становится активной кнопка отправить»?

Question

[12Vadim12]

<div class="drible__widget-popup">
      <div class="drible__widget-popup-content">
      <span class="drible__widget-popup-close"><i class="fa fa-times" aria-hidden="true"></i></span>
      <div class="drible__widget-popup-top">
        <div class="widget-popup-top-img">
          <img src="https://cdn.dribbble.com/users/108/avatars/normal/e1ef1cb517fe6a1897d6bde39fabe71a.jpg?1458569856" alt="1">
        </div>
        <h3 class="widget-popup-top-title">
          Message Mike Kus
        </h3>
      </div>
      <textarea name="" placeholder="Start with Mike Kus" id="widget-popup-area" cols="30" rows="10"></textarea>
      <div class="drible__widget-popup-btns">
        <button class="drible__widget-popup-cancel">Cancel</button>
        <button class="drible__widget-popup-send">Send</button>
      </div>
    </div>
    </div>

drible__widget-popup {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top:0;
  overflow: auto;
  display: none;
}
.drible__widget-popup-content {
  margin: 40px auto 0px;
  position: relative;
  text-align: center;
  padding: 40px 24px 24px 24px;
  width: 600px;
  background-color: #fff;
  border-radius: 8px;
}
.drible__widget-popup-close{
  position: absolute;
  top:30px;
  right: 15px;
  cursor: pointer;
}
.drible__widget-popup-close i{
  width: 24px;
  height: 24px;
  color:#9E9EA7;
}
.drible__widget-popup-close i:hover{
  color:#EA4C89;
}
.drible__widget-popup-top {
  display: flex;
}
.widget-popup-top-img img{
  width: 56px;
  height: 56px;
  border-radius: 50px;
}
.widget-popup-top-title {
  padding-left: 20px;
  align-self: center;
  font-weight: 700;
  font-size: 32px;
}
#widget-popup-area{
  background-color: #F3F3F4;
  padding: 10px 16px;
  width: 550px;
  margin-top: 12px;
  border: 3px solid #F7B7D0;
  border-radius: 8px;
  font-size: 16px;
  height: 108px;
}
#widget-popup-area:hover{
  border: 3px solid #F7B7D0;
}
.drible__widget-popup-btns {
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
}
.drible__widget-popup-cancel {
  margin-right: 16px;
  background: f3f3f4;
  color:#000;
}
.drible__widget-popup-cancel:hover{
  background: #838996;
}
.drible__widget-popup-cancel,
.drible__widget-popup-send{
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.drible__widget-popup-send{
  background: #F7B7D0;
  color:#fff;
}

Answer 1

[Aricus]

Лучше делать подобные вещи с помощью js. Вот тут о том, какое нужно событие.

Comments

[12Vadim12]

спасибо) а еще не знаете, как сделать, если textarea пуст, кнопку нельзя было нажать

const SendPopup = document.querySelector(".drible__widget-popup-send");
const WidgPopup = document.getElementById("widget-popup-area")
WidgPopup.addEventListener("input", event=>{
  SendPopup.style.background = "red";
  if(WidgPopup.value.length < 1){
    SendPopup.style.background = "#F3F3F4";
  }
})

[Aricus]

12Vadim12,

const SendPopup = document.querySelector(".drible__widget-popup-send");
const WidgPopup = document.getElementById("widget-popup-area")
WidgPopup.addEventListener("input", event=>{
  if(WidgPopup.value.length < 1){
    SendPopup.style.background = "#F3F3F4";
    SendPopup.setAttribute('disabled', 'disabled'); // Сделать неактивной
  } else {
    SendPopup.style.background = "red"; // Это лучше сюда, чтобы цвет не мигал
    SendPopup.removeAttribute('disabled'); // Сделать обратно активной, если в textarea что-то есть
  }
})

[12Vadim12]

спасибо)а есть ли книга по js с минимальным количеством воды, и реальными примерами?

[Aricus]

12Vadim12, Сам я по платному курсу осваивался. Из бесплатных ресурсов, вот этот, вроде, хороший.