apply same js function repeatedly to various numbered inputs

Question

Trying to achieve something in javascript which I imagine can be written much more succinctly but is proving beyond me! See fiddle: http://jsfiddle.net/C2CNS/108/

Repetitive examples of:

<textarea id="input1" maxlength="100"></textarea>
<p><span id="charsLeft1">100</span> characters left</p>

With incremental numbers assigned and apended to #input and #charsleft. And JS:

var maxLen = 100;
$('input1').observe('keyup', function(evt) {
  $('charsLeft1').update(maxLen - $('input1').value.length);
});

The final page will have MANY inputs with identical maxlength and individual counter PER textbox input. For each #input(number) the corresponding #charsleft(number) will be updated.

Since it is essentially the same function to the JS and same pattern to the HTML, rather than write the JS out longhand for each input counter (as shown in the fiddle link above): what would the elegant solution be that would keep track of all potential textboxes and corresponding counters? Thanks.

Fiddle is based on http://jsfiddle.net/nslr/C2CNS/ originally posted on https://stackoverflow.com/questions/5379116/count-characters-in-field-dynamicly (2nd answer down) — I AM mw, Nov 21 '17 at 13:18

score 0 · Accepted Answer · answered Nov 21 '17 at 13:16

One such example is shown below (Using jquery)

Wrap both elements textarea and its respective p in a container
At the keyup event update the character-left count in the span within the same container for a textarea.

Demo

$('.textareaContainer textarea').on('keyup', function(evt) {
  var maxLen = Number($(this).attr("maxlength"));
  $(this).parent().find(".charsLeft").html(maxLen - $(this).val().length);
});

.textareaContainer {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textareaContainer">
  <textarea maxlength="100"></textarea>
  <p><span class="charsLeft">100</span> characters left</p>
</div>
<div class="textareaContainer">
  <textarea maxlength="100"></textarea>
  <p><span class="charsLeft">100</span> characters left</p>
</div>

This gives the additional functionality of a varied maxlength, which could be useful but is outside of the scope of the question. Much appreciated though. — I AM mw, Nov 21 '17 at 13:44

RedBuld · Answer 2 · 2017-11-22T07:37:15.657

0

Easy html

<div data-node="limited">
    <textarea id="input1" maxlength="100"></textarea>
    <p><span data-node="left">100</span> characters left</p>
</div>

Single initialization, elements stored, no repeated DOM searches

$('[data-node="limited"]').each(function(ind,group){
    var group = $(group);
    var inp = group.find('input, textarea')
    var left = group.find('[data-node="left"]')
    v = function(inp,left)
    {
        l = parseInt(inp.attr('maxlength')) - inp.val().length
        left.html(''+l);
    }
    inp.on('keyup', function(){v(inp,left);})
    v(inp,left);
});

without jQuery

list = document.querySelectorAll('[data-node="limited"]')
Array.prototype.forEach.call(list,function(group){
    var inp = group.querySelectorAll('input, textarea')[0]
    var left = group.querySelectorAll('[data-node="left"]')[0]
    v = function(inp,left)
    {
        l = parseInt(inp.getAttribute('maxlength')) - (inp.value).length
        left.innerHTML = ''+l;
    }
    inp.addEventListener('keyup',function(){v(inp,left);},false);
    v(inp,left);
})

edited Nov 22 '17 at 07:37

answered Nov 21 '17 at 13:20

RedBuld

1
2

This sounds like the most robust answer, and with no jQuery but I can't get the code above to work. See: https://codepen.io/anon/pen/yPKJLN What am I missing? – I AM mw Nov 21 '17 at 13:46
@MichaelWilliams sorry, miss part of core – RedBuld Nov 21 '17 at 14:41
@MichaelWilliams Fully review code, find 1 error. Please replace all js with new – RedBuld Nov 21 '17 at 14:43
codepen link above updated with revised code. Only functions on last input when multiple inputs are present. – I AM mw Nov 21 '17 at 15:30
@MichaelWilliams, Sorry, I'm used to the fact that the CoffeeScript automatically puts the `var` for variables – RedBuld Nov 22 '17 at 07:36

score 0 · Answer 3 · answered Nov 21 '17 at 13:22

This issue can be easily handled with the code as given here.

<textarea id="input1" maxlength="100"></textarea>
<p><span id="charsLeft1" class="lenghtDisplay">100</span> characters left</p>
<textarea id="input2" maxlength="100"></textarea>
<p><span id="charsLeft2" class="lenghtDisplay">100</span> characters left</p>

var maxLen = 100;
$(document).on('keyup','textarea', function(evt) {
  $(this).next().find('.lenghtDisplay').text(maxLen - $(this).val().length);
});

apply same js function repeatedly to various numbered inputs

3 Answers3