JS：在 textarea 中输入时更改 class 为 div 一段时间后不输入

Question

我的网页上有一个文本区域和发送按钮。

如何在输入时更改发送按钮的样式（更改为特定的 CSS class），然后在一段时间不输入后更改为另一个 CSS class.

另外，删除消息后，发送按钮的样式必须变回原来的样式CSS class.

这是我试过的代码：

function isTyping(val) {
  if (val == 'true') {
    document.getElementsByClassName('send')[0].innerHTML = "Class1";
  } else {
     document.getElementsByClassName('send')[0].innerHTML = "Class2";
   
  }
}

.type-message:focus + .send {
  background-color: red;
}

.class1 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: red;
}

.class2 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: yellow;
}

<textarea class="type-message" onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" cols="45" rows="5">
</textarea>

<div class="send">Class2</div>

但它不起作用。怎么了？

Answer 1

解决方案：

Run CODE snippet 在下方并在出现文本区域时键入。

看看这是不是你想做的：

var delay = 3000; // that's 3 seconds of not typing
var timer = null;
function isTyping() {
  clearTimeout(timer);
  var value = document.getElementById('text').value;
  if( value ) {
    document.getElementById('send').innerHTML = "Typing";
    document.getElementById("send").className = "typing";
    timer = setTimeout(notTyping, delay); 
  }
  else {
    notTyping();
  }
}

function notTyping() {
  document.getElementById('send').innerHTML = "Not Typing";
  document.getElementById("send").className = "not-typing";
}

#send {
  display: block;
  width: 200px;
  height: 20px;
}
.not-typing {
  background-color: yellow;
}
.typing {
  background-color: red;
}

<textarea class="type-message" oninput="isTyping()" id="text" name="textarea" cols="45" rows="5"></textarea>
<div id="send" class="not-typing">Not Typing</div>

您的代码有问题：

您的代码无效的原因是：

You changed class on the event onkeypress & then immediately on the event onkeyup.

onkeypress 表示您按下任意键，而 onkeyup 表示您释放同一个键。因此，当您键入 onkeypress、onkeyup、onkeypress、onkeyup 时……不断发生，class 不断变化。

相反，我所做的是：

1. Used only one oninput event - that detects any change in input.

2. Inside event handler used a timer using setTimeout function. This only fires after 3 seconds of inactivity or if the textarea is empty.