2011-08-15 7 views
0

私は250文字の制限をユーザーに入力するためのテキスト領域があります。これは正常に動作します。私はその場でそのボックスを編集するためのコードをいくつか追加しました。javascript textarea restriction problem

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> 
をHERESに最初のアドボックス??

追加するためのボックスとボックスを制限するために、「編集」コードを構築することが可能ですので、唯一の250文字と同じ方法

ジャバスクリプト

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

彼そのボックスを編集するためのスニペットコードをレ...どのように私は上記のjavascriptをミラーリングするために、250文字以上を入力するボックスを停止するために、以下のように構造化できますか?

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

今追加:

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

今Imが取得:

'value.lengthは' オブジェクト

答えて

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

nullであるか、ない人ありがとうねえが、 $ {const ['COMMENT_MAX_LENGTH']}はこのページでは認識できません.... .maxLength = 250? –

+0

代わりにプレーン250を使用してください。これを反映するために上記のコードを編集しました。 – Gerben