用于文本输入的Javascript字符限制计数器函数

我认为更好的想法是对这些类型的元素使用"onchange"事件。

基本上，只要文本区域/文本输入失去焦点并发生更改，就可以绑定一个函数来计算剩余的字符数。

document.getElementById('press-form-body').onchange = function() {
 // your stuff (double check this to make sure the "this" value is right
  // use this as an example
  document.getElementById(targetcounter).innerHTML = this.value.length - 1000
}

另一种解决方案是使用"键"事件来监听输入中的任何按键。

 document.getElementById('press-form-body').onkeypress = function() {
     // your stuff (double check this to make sure the "this" value is right
      // use this as an example
      document.getElementById(targetcounter).innerHTML = this.value.length - 1000
    }

function limittxt()
{
    var tval = document.getElementById('press-form-body').value;
    tlength = tval.length;
    set = 100;
    remain = parseInt(set - tlength);
    document.getElementById('counter').innerHTML = remain + " characters left";
    if (remain <= 0) {
    document.getElementById('press-form-body').value = tval.substring(0, tlength - Math.abs(remain)))
    }
}

在输入元素中调用此函数，如下所示：

<input type='text' onkeypress='limittxt()' onkeyup='limittxt()' onkeydown='limittxt()'>

我想错误发生在以下行：

var timer = setTimeout("CountRemaining(string, targetcounter, limit)",50);

在这里，我认为它应该是这样的：

var str = "CountRemaining(" + string + "," + targetcounter + "," + limit + ")";
var timer = setTimeout(str,50);

如果你想继续使用计时器定期运行函数，那么你需要类似以下的代码（灵感来自@Sameera Thilakasiri）：

function CountRemaining(string, targetcounter, limit){
    var count = document.getElementById(string).value.length;
    document.getElementById(targetcounter).innerHTML = ((limit-count) + " characters left");
}
setInterval(function() {
    // call the function for each of the inputs on the page you need a counter for
    CountRemaining('press-form-body', 'counter', 1000);
    // etc
}, 50);

然而，我相信@amchang87的方法总体上更好，所以如果可能的话，我建议你这样做。

跟踪剩余的字符数总是有点困难。使用keyup或keypress是一个很好的事件，但这并不包括拖放到元素中的文本，因此人们最终会使用计时器。

如果要监视许多元素，请考虑将它们放入一个数组中，然后在每个间隔调用计时器并检查所有元素。不过，要注意性能，每50毫秒运行一次该函数可能会消耗相当多的浏览器性能，因此请尽量将处理量降至最低。

这意味着可以缓存任何内容，并保持逻辑简单。

编辑

下面的run和stop方法可用于在特定元素获得焦点时启动计时器，然后在它们失去焦点时停止计时器。这样你就不会在不需要的时候占用资源。

/编辑

var keyCountCheck = (function() {
  var elementArray, timerRef;
  return {
    // Initialise once
    init: function() {
      var input, inputs;
      // Initialise elementArray if hasn't been done already
      // If adding and removing elements, create new aray
      // instead each time.
      if (!elementArray) {
        elementArray = [];
        inputs = document.getElementsByTagName('input');
        for (var i=0, iLen=inputs.length; i<iLen; i++) {
          input = inputs[i];
          if (input.type == 'text') {
            elementArray.push(input);
          }
        }
      }
      timerRef = window.setInterval(keyCountCheck.run, 50);
    },
    // Run timer
    run: function() {
      // If setInterval not running, start it
      if (!timerRef) {
        keyCountCheck.init();
      }
      var el;
      for (var i=0, iLen=elementArray.length; i<iLen; i++) {
        checkLength(elementArray[i]);
      }
    },
    // In case there is a reason to stop this thing.         
    stop: function() {
      if (timerRef) {
        window.clearTimeout(timerRef);
        timerRef = null;
      }
    }
  };
}());
window.onload = keyCountCheck.init;

function checkLength(el) {

  // Character limit can be set as a data- attribute or
  // class or various other ways. This is the simple way
  var limit = 10;
  var msgEl = document.getElementById(el.id + '_limitMsg');
  if (msgEl) {
    msgEl.innerHTML = (limit - el.value.length) + ' characters left. ' + (new Date()); 
  }
}

一些支持HTML的游戏：

<input id="i0" value="1"><span id="i0_limitMsg"></span>
<br>
<input id="i1" value="2"><span id="i1_limitMsg"></span>
<br>
<button onclick="keyCountCheck.stop()">stop</button>
<button onclick="keyCountCheck.run()">run</button>