javascript - JS : Change class of div while typing in textarea and after some time of not-typing

Question

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

如何在输入时更改发送按钮的样式(更改为特定的 CSS 类)，然后在一段时间不输入后更改为另一个 CSS 类。

另外，当消息被删除时，发送按钮的样式必须变回原来的 CSS 类。

这是我试过的代码:

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

解决方案:

运行下面的代码片段并在文本区域出现时键入。

看看这是不是你想做的:

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 时……不断发生，类不断变化.

我做的是:

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.