Question

I have a text area which i put a 250 character limit on for the user to type. This works fine. I added some code to edit that box on the fly. Is it possible to structure the “edit’ code to restrict the box so only 250 characters the same way as the initial add box??

Heres the box for adding:

jsp:

<td colspan="3">
    You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH']}</span></strong> characters left.<br/>
    <textarea id="comment" name="comment" rows="3"
        onfocus="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
        onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
        onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"></textarea>
        <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
</td>

javascript:

    function characterCounter(id, maxLen, inputElement)
{
    spanId = document.getElementById(id);

    if (spanId)
    {
        // Update the counter the user sees.
        var whatIsLeft = maxLen - inputElement.value.length;

        if ( whatIsLeft < 0 ) whatIsLeft = 0;
        spanId.innerText = whatIsLeft;
    }

    // Restrict user from entering more than the maxlen.
    if ( inputElement.value.length > maxLen )
    {
        inputElement.value = inputElement.value.substring( 0, maxLen );
    }
}

Heres a snippet code for editing that box….how can I structure below to mirror the javascript above just to stop the box from entering more than 250 characters?

    function editCommentToggle( id )
{
    theRow = document.getElementById("id"+id);
    //user = theRow.cells[0].innerHTML;
    //date = theRow.cells[1].innerHTML;
    com = theRow.cells[2].innerHTML;


    idx = 2;


        // Comment field

        cell = theRow.cells[idx];
        while( cell.childNodes.length > 0 ) cell.removeChild(cell.childNodes[0]);
        element = document.createElement("textarea");
        element.id="comments-"+id;
        element.rows="3";
        element.value = com;
        element.style.width =  "400px";
        element.maxLength="250";
        cell.appendChild(element);

JUST ADDED:

maxlength = 250;
element.onfocus = element.onkeydown = element.onkeyup = function(){return characterCounterEdit(undefined, maxlength, element);}; 
        cell.appendChild(element);

 function characterCounterEdit(id, maxLen, inputElement)
{
    spanId = document.getElementById(id);

    if (spanId)
    {
        // Update the counter the user sees.
        var whatIsLeft = maxLen - inputElement.value.length;

        if ( whatIsLeft < 0 ) whatIsLeft = 0;
        spanId.innerText = whatIsLeft;
    }

    // Restrict user from entering more than the maxlen.
    if ( inputElement.value.length > maxLen )
    {
        inputElement.value = inputElement.value.substring( 0, maxLen );
    }
}

now Im getting:

‘value.length’ is null or not an object

Answer 1

...
element.maxLength="250";
//add this
element.onfocus = element.onkeydown = element.onkeyup = function(){return characterCounter(undefined, 250, element);};
//end add
cell.appendChild(element);
...