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

2つのオブジェクトを最初の引数として関数textCounterに渡そうとしているようです。これらを&&（論理的な「and」）と組み合わせることはできません。ただし、オブジェクトの配列を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>

上記のテアで：

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