Question

89

Javascript character count

rated 0 times [ 90] [ 1] / answers: 1 / hits: 47559 / 11 Years ago, wed, november 13, 2013, 12:00:00

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

I have the following 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:

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 textarea and also countdown the number within the label but it is doing neither.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yaquelina

Add To Favorites

Follow

Total Points: 517

Total Questions: 101

Total Answers: 96

Location: Egypt

Member since Tue, Jul 6, 2021

3 Years ago

yaquelina questions

1 Unable to access process variable in Vue3JS Vite project

Sun, Feb 13, 22, 00:00, 2 Years ago

1 How to return an array of unique objects based on the id of the object in es6?

Mon, Dec 27, 21, 00:00, 2 Years ago

1 How to run nodemon + forever in the background

Tue, Jun 2, 20, 00:00, 4 Years ago

1 How to remove warning in React native

Sun, Mar 8, 20, 00:00, 4 Years ago

1 Angular 9 - You must pass in a NgModule or NgModuleFactory to be bootstrapped

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 11 Years ago mathewb · Accepted Answer

There are two issues in the fiddle

no form element

script mode was onload, which means that window object didnt have textCounter function

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

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

}