Question

我正在使用此处给出的答案Count textarea characters但需要对其进行修改以对文本字段输入中的字符进行倒计时，并在达到某些倒数数字限制时更改颜色，以便为用户提供某种形式的警告他们正在接近现场限制。

到目前为止，这是我自己所做的。它确实有效！（令人惊讶的）。首先，这就是我的开始：

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length));
    });
});

这就是我重新发明的：

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        if (2550 - $(this).val().length >= 501) {
            $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length));
        } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) {
            $("#count_4_1").text("<span style=\"color: #55a500;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        } else if (2550 - $(this).val().length <= 100) {
            $("#count_4_1").text("<span style=\"color: #ff0000;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        }
    });
});

这就是令人惊讶的作品。有一个例外 - 这就是问题所在。我对JS几乎一无所知。当读出的字符数在2550和500之间时，显示如果正常。当字符读出变为500到100时，读数显示：

<span style="color: #55a500;">Characters remaining: 499</span>

那么如何让JS实际上将css放到正确的显示效果中，而不是简单地在页面上回显？

如果相关，jQuery正在使用中。

Answer 1

或者只是为了好玩：你可能会喜欢这种更通用的，css / data-atributes而不是jquery方法：

[].slice.call(
  document.querySelectorAll('div[data-isRestrictedTextArea]')
).forEach(
  function(el) {
    var txtarea = el.querySelector('textarea')
       ,cntr = el.querySelector('div[data-iscounter]');
    
    cntr.setAttribute('data-maxlen', el.getAttribute('data-maxlen'));
    txtarea.onkeyup = count;
  }  
);

function count(e) {
  var len  = this.value.length,
      cntr = this.parentNode.querySelector('div[data-iscounter]'),
      maxl = this.parentNode.getAttribute('data-maxlen'),
      warn = maxl-Math.floor(0.2*maxl), // 80%  
      stop = maxl-Math.floor(0.1*maxl); // 90%

  cntr.setAttribute('data-ncharacters', len);
  cntr.className = len >= stop ? 'stop'
                   : len >= warn ? 'warn' 
                   : '';
  // truncate if len>=maxlen
  this.value = len >= maxl ? this.value.substr(0, maxl) : this.value;
  // set attribute for reporting
  cntr.setAttribute('data-ncharacters', len >= maxl ? maxl : len);
  return;
}

body {font: 12px/15px normal verdana,arial;}

div[data-isrestrictedTextarea] {
  display: inline-block;
  margin-top: 1em;
}

div[data-iscounter] {
  color: green;
  background-color: #eee;
}

div[data-iscounter]:before {
  content: 'you typed 'attr(data-ncharacters)' characters';
}

div[data-iscounter]:after {
    content: ' [max 'attr(data-maxlen)' characters]';
}

div[data-iscounter].warn {
  color: orange;
}

div[data-iscounter].stop {
  color: red;
}

<div data-isrestrictedTextarea="1" data-maxlen="15">
  <textarea placeholder="start typing" rows="2" cols="60"></textarea>
  <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div>
</div>

<div data-isrestrictedTextarea="1" data-maxlen="100">
  <textarea placeholder="start typing" rows="5" cols="60"></textarea>
  <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div>
</div>

Answer 2

从jQuery页面，关于.text（这里：http://api.jquery.com/text/）：

我们需要注意，此方法会根据需要转义提供的字符串，以便在HTML中正确呈现。为此，它调用DOM方法.createTextNode（），不会将字符串解释为HTML

（强调我的。）

您需要使用.append功能（此处为http://api.jquery.com/append/）将文字附加到页面，而不是将其放入.text。

此外，如果您放置新字符串的元素中没有其他内容，您只需使用.html（此处：http://api.jquery.com/html/）用新字符串替换容器的全部内容

Answer 3

由于您使用的是HTML标记，因此无法使用.text()方法进行设置。改为使用.html()方法：

我添加了一些清理代码..在变量中设置计算以使其更清晰......

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        var diff = (2550 - $(this).val().length);
        if (diff >= 501) {
            $("#count_4_1").html("Characters remaining: " + diff);
        } else if ((diff <= 500) && (diff >= 101)) {
            $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>");
        } else if (diff <= 100) {
            $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>");
        }
    });
});

Answer 4

有很多方法可以做到：

首先在HTML中创建一个标记：

<div id="warning"></div> /* Exactly above or below your text box */

接下来你可以使用JS：

使用Javascript：

var html= "<span style='color: #55a500;'>Characters remaining: 499</span>";
document.getElementById("warning").innerHtml(html);

使用Jquery：

var html= "<span style='color: #55a500;'>Characters remaining: 499</span>";
document.getElementById("warning").innerHtml(html);
$('#warning').html(html);

或

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        if (2550 - $(this).val().length >= 501) {
            $("#count_4_1").html("Characters remaining: " + (2550 - $(this).val().length));
        } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) {
            $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        } else if (2550 - $(this).val().length <= 100) {
            $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        }
    });
});

javascript文本字段计数器显示

4 个答案: