Question

我似乎无法在任何地方找到有关如何执行此操作的任何信息。我甚至不知道是否使用＆amp;＆amp;用于将文本框值一起添加。我可以让计数器轻松计算一个方框或另一个方框，但我需要两个方框中的文字给出剩余的总字符数，因为每个方框中的组合字符不超过500个。

这是我的javascript计数器。

<SCRIPT type="text/javascript">
function textCounter(field,cntfield,maxlimit) 
{
  if (field.value.length > maxlimit)
    field.value = field.value.substring(0, maxlimit);
  else
    cntfield.value = maxlimit - field.value.length;
}
</script>

这是我的文本框。

    <form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"
onKeyUp="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"></textarea>
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"
onKeyUp="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"></textarea>
<br>
<input readonly type="text" name="chars" size="3" maxlength="3" value="500">
characters left

Answer 1

看起来你正在尝试将两个对象作为第一个参数传递给函数textCounter。你不能把这些放在一起＆amp;＆amp; （这是逻辑“和”）。但是，您可以将一组对象传递给textCounter。

textCounter( [document.myForm.message1,document.myForm.message2], ... )

从textCounter中，您可以按索引访问对象

textCounter( fields, ... ) {
    if ( fields[0].value. length ... ){}
    if ( fields[1].value. length ... ){}
}

Answer 2

使用表单控件的form属性可以使代码更简洁：

<form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this.form.message1 && this.form.message2, this.form.chars, 500)"
    ...></textarea>

在上面：

this.form.message1 && this.form.message2

通过首先评估this.form.message1来处理

，它返回对DOM元素的引用，该类型转换为true。因此，将评估下一个表达式并返回结果。

所以你有效地将this.form.message2传递给了这个函数。您似乎想要传递两个控件，然后获取两个控件的总字符数。

因此，您需要将两个元素都传递给函数并相应地调整逻辑，例如

function textCounter(field0, field1, cntfield, maxlimit) {
  var totalChars = field0.value.length + field1.value.length;
  var diff = maxlimit - totalChars;

  if (diff < 0) {
    field0.value = field0.value.substring(0, field0.value.length + diff);

  } else {
    cntfield.value = diff;
  }
}

和markukp：

<form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this, this.form.message2, this.form.chars, 500)"
    onKeyUp="textCounter(this, this.form.message2, this.form.chars, 500)"></textarea>
<br>
    <textarea name="message2" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this, this.form.message1, this.form.chars, 500)"
    onKeyUp="textCounter(this, this.form.message1, this.form.chars, 500)"></textarea>
<br>
<input readonly type="text" name="chars" size="3" maxlength="3" value="500">
characters left

请注意，一旦达到限制，这会产生相当烦人的行为，特别是如果中间添加了更多字符，并且用户没有注意到它们从末尾被修剪。

让用户知道他们已经删除或需要删除多少个字符并让他们知道如何满足该要求（例如，查看StackOverflow评论的工作方式）。

修改

我只会显示剩下多少个字符，如果它变为负数则带有减号和颜色变化，例如

<style ...>
  .negative {
    font-weight: bold;
    color: red;
   }
</style>

<script>

function textCounter(field0, field1, cntfield, maxlimit) {
  var totalChars = field0.value.length + field1.value.length;
  var diff = maxlimit - totalChars;

  if (diff < 0) {
      addClass(cntfield, 'negative');

  } else {
      removeClass(cntfield, 'negative');
  }
  cntfield.value = diff;
}

一些辅助函数：

function hasClass(el, cName) {
  var re = new RegExp('(^|\\s)' + cName + '(\\s|$)');
  return re.test(el.className);
}

function addClass(el, cName) {
  if (!hasClass(el, cName)) {
    el.className = (el.className + ' ' + cName).replace(/(^\s*)|(\s*$)/g,'').replace(/\s+/g,' ');
  }
}

function removeClass(el, cName) {
  var re;
  if (hasClass(el, cName)) {
    re = new RegExp('(^|\\s)' + cName + '(\\s|$)');
    el.className = el.className.replace(re, ' ').replace(/(^\s*)|(\s*$)/g,'').replace(/\s+/g,'');
  }
}

</script>

如何使用javascript字符计数器添加多个文本框的总计

2 个答案:

修改