textarea中限制輸入字符長度


要在textarea中限制輸入字符的長度,比如在twitter中要限制字符為140個,可實現的方法有:

   1.  

<textarea name="A" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'>aaaa</textarea>

   2. 我們也可以將判斷寫在函數中,如果輸入的長度超過顯示,就顯示提示信息,如下:
       <form name = "testform">
         <textarea name="A" cols="45" rows="2" >aaaa</textarea>
           <input type="button" onclick = "checkValid()" value= "提交">
          </form>
<script language="javascript">
function checkValid()
{
 var a = document.testform.A;
 
 if(a.value.length > 20)
 {
  alert("輸入的備注框長度不能超過20個字符!");
  return false;
 }
 return true;
}

        3.  上述兩種方法無法判斷如果使用copy后的准確字數,可以使用onpropertychange屬性。

onpropertychange可以用來判斷預定元素的value值,當元素的value值發生變化時判斷事件就會被觸發,僅關心被監測元素的 value值,避開了輸入的來源,從而可以比較理想地達成我們的限制字數這一目的。它屬於JS范疇,可以在表單方框區代表中嵌套使用,以下是代碼和效果樣式,可以像上面那樣測試輸入,你會發現它真正達到目的:不管用什么方式輸入,它只能輸入100個字(漢字或其他小解符號):

代碼:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

        4.  在<textarea>的onKeyup,onKeyDown和onPaste事件中調用js方法,例:

          <tr align="center">
                 還可以輸入<span id="validNum">140</span>字</td>
        </tr>
        <tr  align="center">
            <td>
                <textarea name="talkTopic" id="talkTopic" rows=4 cols="50" maxlength='140' onKeyDown="checkLength()"
                 onKeyUp="checkLength()" onPaste="checkLength()"></textarea>
            </td>
        </tr>

      function checkLength(){
        var value = document.getElementById("talkTopic").value;
        if(value.length>140){
            document.getElementById("talkTopic").value=document.getElementById("talkTopic").value.substr(0, 140);
        }else{
            document.getElementById("validNum").innerHTML = 140 - value.length;
        }
    }

     在checkLength()中,驗證textarea的長度,如果超過了限制的長度,則取前140個字符。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM