6

这里的例子：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;
    }

由于某种原因，我完全错过了，这似乎没有按预期工作。

它应该限制 in 中的字符数，textarea并倒计时 in 中的数字，label但它什么都不做。

4

4 回答 4

13

小提琴有两个问题

  • 没有表单元素
  • 脚本模式是onload，这意味着窗口对象没有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;
}
于 2013-11-13T19:33:43.010 回答
2

更改您的 html 以删除所有 onkey 内容

<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/

于 2013-11-13T19:33:10.093 回答
1

见小提琴：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;
    }
}

id="q17length"您的 html 中也缺少 id

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

于 2013-11-13T19:47:37.050 回答
0 
var tweet = prompt("Write Tweet:");

var tweetCount = tweet.length;

alert("You have written " + tweetCount + " characters, you have " + (140- tweetCount) + " Chartacters remaining")
于 2019-02-14T21:40:07.060 回答