Javascript字符数

Question

此处示例：http://jsfiddle.net/67XDq/1/

我有以下HTML：

<tr id="rq17">
    <td class='qnum'>17.</td>
    <td class='qtext'>Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/>
              <textarea 
                 onKeyDown="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500);"
                 onKeyUp="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500)" 
                 class="scanwid" name="q17" id="q17" rows="5" cols="">
              </textarea>
    </td>
</tr>

以下Javascript：

function textCounter(field,cntfield,maxlimit) {
    if (field.value.length > maxlimit) // if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    // otherwise, update 'characters left' counter
    else
    cntfield.value = maxlimit - field.value.length;
    }

由于某些原因，我完全没有这个，这似乎没有按预期工作。

它应该限制textarea中的字符数量，并且还会倒计时label中的数字，但它不会这样做。

Answer 1

小提琴有两个问题

• 没有表单元素
• 脚本模式是onload，这意味着window对象没有textCounter函数

请参阅更新的小提琴http://jsfiddle.net/67XDq/7/，标记：

<tr id="rq17">
   <td class='qnum'>17.</td>
   <td class='qtext'>
    Questions? <i>Maximum of 500 characters - 
    <input style="color:red;font-size:12pt;font-style:italic;" readonly="readonly" type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500" /> characters left</i>
    <br />
    <textarea 
          onKeyDown="textCounter(this,'q17length',500);"
          onKeyUp="textCounter(this,'q17length',500)" 
          class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea>
   </td>
</tr>

和代码

function textCounter(field, cnt, maxlimit) {         
  var cntfield = document.getElementById(cnt)   
  if (field.value.length > maxlimit) // if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    // otherwise, update 'characters left' counter
  else
    cntfield.value = maxlimit - field.value.length;
}

Answer 2

将您的html删除以删除所有关键内容

<tr id="rq17">
  <td class='qnum'>17.</td>
  <td class='qtext'>Questions? <i>Maximum of 500 characters - <input id="charsLeft" style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea class="scanwid" name="q17" id="q17" rows="5" cols="" maxlength="500"></textarea></td>
</tr>

javascript就是这样：

 $("#q17").keyup(function() {
    $('#charsLeft').val(500 - $(this).val().length);
});

这是一个小提琴：http://jsfiddle.net/67XDq/11/

Answer 3

请参阅小提琴：http://jsfiddle.net/abhiklpm/67XDq/15/

修改了功能：

function textCounter(field, cntfield, maxlimit) {        
    if (document.getElementById(field).value.length > maxlimit) {
        // if too long...trim it!
        document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit);
    }
    // otherwise, update 'characters left' counter
    else {        
      document.getElementById(cntfield).value = maxlimit - document.getElementById(field).value.length;
    }
}

你的html

中也缺少了id="q17length"

编辑：你也没有把id传递为字符串：textCounter('q17','q17length','500');

Answer 4

val == 5