Question

我用jQuery创建了它：它计算输入字段中的字符数。问题：我有两个带两个计数器的输入字段，它们都听第一个输入字段...所以我不能单独使用它们。我怎样才能实现它？

var maxLength = 100;
$('input').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('.chars').text(length);
});

 <input type="text" name="title" id="title" maxlength="100">
 <input type="text" name="title" id="title" maxlength="100">

也许我在一个页面上有5个输入字段，甚至是......我希望所有计数器仅适用于特定的输入字段（每个计数器只有一个输入字段）。

Answer 1

$('input')匹配所有输入字段，keyup处理程序this内指的是触发处理程序的特定输入。到目前为止，非常好。

输出也需要为每个输入转到不同的节点。有很多方法可以做到这一点;在这里，我选择了“在当前输入之后将DOM遍历到下一个'.chars'元素的简单”：

$('input').keyup(function() {
  var maxLength = $(this).attr("maxlength"); // note we can read this from the input, no need for a global variable
  var length = $(this).val().length;
  var remaining = maxLength-length;
  $(this).next('.chars').text(remaining)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="100"></input>
<span class="chars"></span>
<br>
 
<input type="text" maxlength="100"></input>
<span class="chars"></span>

但是，DOM遍历并不总是匹配元素的好方法，因为编辑HTML布局最终可能会改变元素之间的路径，这会破坏您的脚本。

另一种方法是在每个input和.chars节点上放置一个数据属性，并使用该值来标识哪个输出节点对应于哪个输入：

$('input').keyup(function() {
  var length = $(this).val().length;
  var maxLength = $(this).attr("maxlength");
  var remaining = maxLength-length;
  var myId = $(this).data("counterid");
  $('.chars[data-counterid='+myId+']')
      .text(remaining)
      .toggleClass("full", (remaining===0)); // colors per comment below
});

.full {background-color: #FCC}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="10" data-counterid="1"></input>
<span class="chars" data-counterid="1"></span>
<br>
 
<input type="text" maxlength="10" data-counterid="2"></input>
<span class="chars" data-counterid="2"></span>

而且，是的，正如几个人所指出的那样，ID应该是唯一的。这与你的问题无关，但无论如何都值得修复。

Answer 2

您的代码有以下错误：

$('input')将仅定位第一个输入字段
无法区分两个输入字段，因为它们都具有相同的ID title
$('.chars')将显示一个输入字段的长度。另一个输入字段的长度怎么样？

以下是应该达到您想要的目标的代码：

var maxLength = 100;

// target #title1
$('#title1').keyup(function() {
  // store length of #title1 in variable length1
  var length1 = $(this).val().length;
  var length1 = maxLength - length1;
  // display length1 in span with class chars1
  $('.chars1').text(length1);
});

// target #title2
$('#title2').keyup(function() {
  // store length of #title2 in variable length2
  var length2 = $(this).val().length;
  var length2 = maxLength - length2;
  // display length2 in span with class chars2
  $('.chars2').text(length2);
});

<input type="text" name="title" id="title1" maxlength="100">
<input type="text" name="title" id="title2" maxlength="100">

<p>Length 1: <span class="chars1"></span></p>
<p>Length 2: <span class="chars2"></span></p>

即使评论不言自明，如果您需要其他任何帮助，请告诉我。

如何使字符数量计数器输入具体？

2 个答案: