首先定义您将在代码中使用的内容。

Question

我有一个预填充值的文本区域。现在，我还在文本区域下方安装了“剩余字符”行。

我无法获得默认的计数值，如果您注意到在加载时单词计数保持为“剩余250个字符”，还请注意该值已经预先填充了一些文本，因此该功能应该计数默认情况下是预填充文本。

一旦“剩余100个字符”，文本颜色将变为黄色，一旦“剩余0个字符”，文本颜色将变为红色。当我达到黄色并开始删除超过100个字符的文本时，颜色似乎并没有恢复为默认值。

有人可以帮忙吗？

document.addEventListener('keyup', function(event) {
  if (event.target.matches('textarea.minchar')) {
    let element = event.target;
    let value = element.value;
    let maxLength = element.maxLength;
    let rechar = element.nextElementSibling;

    rechar.innerText = `${maxLength - Number(value.length)} characters remaining`;

    if (maxLength - Number(value.length) == 0) {
      rechar.style.color = "#E01424";
    } else if (maxLength - Number(value.length) <= 100) {
      rechar.style.color = "#CF7721";
    }
  }
}, false);

<div class="col-md-10 pl-0">
  <textarea cols="15" rows="4" placeholder="Describe this Extra in brief for your guest" class="minchar" maxlength="250">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar" id="test">250 characters remaining</p>
</div>

Answer 1

在底部添加一个else语句，然后将颜色设置回黑色，如下所示：

if (maxLength - Number(value.length) <= 0) {
  rechar.style.color = "#E01424";
} else if (maxLength - Number(value.length) <= 100) {
  rechar.style.color = "#CF7721";
} else { // You can add an if statement here to check if the color is #000 yet to prevent re-renders
  rechar.style.color = "#000";
}

第一次手动触发事件：

var evnt = document.createEvent('HTMLEvents');
evnt.initEvent('keyup', true, true); // Deprecated but still works
$('textarea.minchar').dispatchEvent(evnt);

Answer 2

我分析了您的问题内容，发现那里有多个问题，解决它们将使您对正在发生的事情有一个开放的认识。让我解释一下。

首先定义您将在代码中使用的内容。

这将帮助您更好地理解代码，首先定义有用的变量。因此，您不必一遍又一遍地打电话给他们。因此，我建议您像这样一开始就定义DOM元素引用：

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

现在，将textarea包含在变量中，将输出div包含在另一个变量中，并使用最大长度。

处理函数中剩余的字符。

您为什么会问这个？好吧，亲自看看代码更改如何更简洁，可读和简单。因此，具有一个简单的功能（其唯一的工作就是更新remaining characters output），可以让您在需要更新时运行该功能。可能是按下键，文本区域更改时，甚至是 网站加载时 ：

功能：

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

仅在网站加载完成后将功能添加到事件侦听器：

window.onload = outputRemainingCharacters;

那样简单，它将从一开始就更新您的价值。

向if语句添加默认条件。

这是因为，如果您不添加默认值，您将永远无法返回您提到的默认值：

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

如您所见，事件侦听器现在更加整洁。我还建议：

将事件侦听器用于所需的特定元素上的特定事件。

这将帮助您在事件触发所需元素时不添加额外的if语句来匹配。由于我们从一开始就定义了文本区域，因此我们现在可以直接为其分配事件侦听器。

注意： 您应该使用事件监听器keydown而不是keyup。这是因为在按住键之前，按住键不会触发事件。 keydown在这里会更准确。在以下代码段中写入文本框时，尝试按住空格键，然后看看会发生什么。

检查此示例：

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

window.onload = outputRemainingCharacters;

<div class="col-md-10 pl-0">
  <textarea cols="15" rows="4" placeholder="Describe this Extra in brief for your guest" class="minchar" maxlength="250">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar" id="test">250 characters remaining</p>
</div>

Answer 3

如果您想使用jQuery，下面应该做同样的事情。

HTML代码段：

    <label class="col-md-12 pl-0">Description</label>
<div class="col-md-10 pl-0">
  <textarea cols="75" rows="5" class="minchar" maxlength="250" placeholder="Describe this Extra in brief for your guest">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar"></p>
  </div>

jQuery代码段：

$('.minchar').on('input', function(e){
    e.stopPropagation();
  // Get Length
  var txtLength = $(e.currentTarget).val().length;
  // Get Remaining Length
  var txtLengthRemaining = 250 - txtLength;
  // Create HTML String
  var strHtml = txtLengthRemaining+" characters remaining";
  // Fill the String & Color based on below conditions
  if(txtLengthRemaining <= 0) {
    $('.rechar').css('color', '#E01424').html(strHtml);
  } else if(txtLengthRemaining <= 100) {
    $('.rechar').css('color', '#CF7721').html(strHtml);
  } else {
    $('.rechar').css('color', '#737373').html(strHtml);
  }
});  
// Trigger event on page load by default.
$('.minchar').trigger('input');

JSFiddle：http://jsfiddle.net/nh147uaf/2/

Textarea剩余字符无法正常工作

3 个答案:

首先定义您将在代码中使用的内容。

处理函数中剩余的字符。

向if语句添加默认条件。

检查此示例：