javascript - 如果文本区域已预填充，如何显示剩余字符？

Question

如果我预先填充了 textarea，则 250 个字符实际上不包括其中已有的默认字词。只有当您开始在其中输入内容时，它才会开始计数。

另外，如何在“剩余 100 个字符”时将文本颜色更改为黄色，在“剩余 0 个字符”时更改为红色

有人可以帮忙吗？

function handle(){
  let element = document.getElementById('input')
  let value = element.value
  let maxLength = element.maxLength
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
  
}

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

Answer 1

the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.

只需在页面加载时运行一次您的函数:

function handle() {
  let element = document.getElementById('input')
  let value = element.value
  let maxLength = element.maxLength
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}

handle();

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"

在每个 keyup 上做一个 if:

function handle() {
  let element = document.getElementById('input');
  let value = element.value;
  let maxLength = element.maxLength;
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`;

  if (maxLength - Number(value.length) == 0) {
    document.getElementById('remaining').style.color = "red";
  } else if (maxLength - Number(value.length) <= 100) {
    document.getElementById('remaining').style.color = "yellow";
  }
}

handle();

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>