Question

尝试在javascript中实现一些我想象的东西可以写得更简洁但是证明超越我！请参阅小提琴：http://jsfiddle.net/C2CNS/108/

重复的例子：

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

分配增量数字并附加到#input和#charsleft。和JS：

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

最后一页将有许多输入具有相同的maxlength和单独的计数器PER文本框输入。对于每个#input（数字），相应的#charsleft（数字）将被更新。

因为它与JS基本上是相同的函数，而且与HTML相同的模式，而不是为每个输入计数器写出JS的缩写（如上面的小提琴链接所示）：优雅的解决方案将保持什么？跟踪所有潜在的文本框和相应的计数器？感谢。

Answer 1

下面显示了一个这样的示例（使用jquery ）

将元素textarea及其各自的p包裹在容器中
在keyup事件中更新span内同一容器中textarea的字符左计数。

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

简单的HTML

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

单个初始化，存储元素，不重复DOM搜索

$('[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);
});

没有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);
})

Answer 3

使用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);
});

将相同的js函数重复应用于各种编号输入

3 个答案: