Javascript функция ограничения счетчика символов для ввода текста

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
}

Другим решением было бы использование событий «key» для прослушивания любого нажатия клавиш на входах.

 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

Отслеживание количества оставшихся символов всегда немного сложно. Хорошим событием для использования является keyup или нажатие клавиши, но оно не охватывает текст, который перетаскивается в элемент, поэтому люди в конечном итоге используют таймер.

Если у вас есть много элементов для мониторинга, рассмотрите возможность помещения их в массив, затем вызывайте таймер через каждый интервал и проверяйте все элементы. Будьте осторожны с производительностью, хотя запуск этой функции каждые 50 мс может значительно снизить производительность браузера, поэтому постарайтесь свести обработку к абсолютному минимуму.

Это означает, что вы можете кэшировать все, что можете, и сохранять логику простой.

Редактировать

Методы run и stop, приведенные ниже, можно использовать для запуска таймера, когда отдельные элементы получают фокус, а затем для его остановки, когда они теряют фокус. Таким образом, вы не тратите ресурсы, когда в этом нет необходимости.

/ Edit

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 3

Если вы хотите действовать в соответствии с принципами использования таймера для регулярного запуска функции, то вам понадобится код, подобный следующему (подсказка для @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 4

Полагаю, ошибка в следующей строке:

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

Здесь я думаю, что это должно произойти:

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

Answer 5

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 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);