Question

我用javascript创建了一个计数器，向用户显示某些文本输入或文本区域中字符的剩余部分（来自设置限制）。这是代码：

<script type="text/javascript">
function CountRemaining()
{
    var limit = 1000;
    var count = document.getElementById('press-form-body').value.length;
    document.getElementById('counter').innerHTML = ((limit-count) + " characters left");
    var timer = setTimeout("CountRemaining()",50);
}
</script>

我上面的憎恶工作得很好，但我的问题是我需要多次使用它并且每次我需要它时单独起作用至少可以说是不切实际的。

我尝试过这个并没有用：

<script type="text/javascript">
function CountRemaining(string, targetcounter, limit)
{
    var count = document.getElementById(string).value.length;
    document.getElementById(targetcounter).innerHTML = ((limit-count) + " characters left");
    var timer = setTimeout("CountRemaining()",50);
}

然后我想我为计时器添加了错误的语句，所以我将其更改为此但仍然无效：

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

我迷路了。任何帮助将受到高度赞赏。谢谢！

Answer 1

我认为更好的想法是对这些类型的元素使用“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
    }

Answer 2

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()'>

Answer 3

我认为错误是以下行：

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

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

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

Answer 4

如果您想继续使用计时器来定期运行该功能，那么您将需要类似于以下的代码（@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的方法总体上更好，所以我建议你尽可能使用它。

Answer 5

跟踪剩下的字符数总是有点困难。要使用的一个好事件是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>

Answer 6

setInterval(
  function CountRemaining(string, targetcounter, limit){
    var count = document.getElementById(string).value.length;
    document.getElementById(targetcounter).innerHTML = ((limit-count) + " characters left");
  },50
);

尝试这种方式。

此解决方案的基本概念，

var   f = function() {function_name(arg1); };
setTimeout(f, msec);

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

6 个答案:

修改

/修改