Html Javascript 字符数

Javascript character count

提问by Homer_J

Example here: http://jsfiddle.net/67XDq/1/

这里的例子：http: //jsfiddle.net/67XDq/1/

I have the following HTML:

我有以下 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>

And the following Javascript:

以及以下 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;
    }

For some reason, which I am completely missing, this doesn't seem to be working as intended.

出于某种原因，我完全不知道，这似乎没有按预期工作。

It should limited the number of characters in the textareaand also countdown the number within the labelbut it is doing neither.

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

回答by vittore

There are two issues in the fiddle

小提琴中有两个问题

• no form element
• script mode was onload, which means that window object didnt have textCounterfunction

• 没有表单元素
• 脚本模式是onload，这意味着窗口对象没有textCounter功能

see updated fiddle http://jsfiddle.net/67XDq/7/, markup:

请参阅更新的小提琴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>

and code

和代码

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

回答by Tom G

CHange your html to remove all that onkey stuff

更改您的 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>

And the javascript is this:

javascript是这样的：

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

Here's a fiddle: http://jsfiddle.net/67XDq/11/

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

回答by abhiklpm

see fiddle: http://jsfiddle.net/abhiklpm/67XDq/15/

见小提琴：http: //jsfiddle.net/abhiklpm/67XDq/15/

modified the function:

修改了函数：

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

also you were missing id id="q17length"in your html

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

edited: also u were not passing the ids as string: textCounter('q17','q17length','500');

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

回答by Ammar Khan

var tweet = prompt("Write Tweet:");

var tweetCount = tweet.length;

alert("You have written " + tweetCount + " characters, you have " + (140- tweetCount) + " Chartacters remaining")