时间戳

首页 > 解决方案 > 如果预填充文本区域，如何显示剩余字符？

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

问题描述

如果我预先填写了 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>

标签： javascriptjqueryhtmlcss

解决方案

250 个字符实际上并没有计算其中已经存在的默认单词。只有当您开始在其中输入内容时，它才会开始计数。

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

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>

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

if对每个做一个keyup：

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>

推荐阅读