0

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

2 回答 2

1

看起来您正试图将两个对象作为第一个参数传递给您的函数 textCounter。您不能将它们与 && （这是逻辑“和”）放在一起。但是，您可以将对象数组传递给 textCounter。

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

在 textCounter 中，您可以通过索引访问对象

textCounter( fields, ... ) {
    if ( fields[0].value. length ... ){}
    if ( fields[1].value. length ... ){}
}
于 2012-11-07T01:15:31.170 回答
1

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>

在上面的thea中：

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

和标记：

<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>
于 2012-11-07T01:27:46.067 回答