在TextArea中,如何限制行数和字符数

分享于 

6分钟阅读

Web开发

  繁體
  • 下载演示-1.81 KB
  • 介绍

    下面是使用客户端JavaScript将TextArea的内容限制为一定数量的字符,以及特定的行数(不一定等于TextArea的可见行数)。

    文本区域限制

    例子

    TextArea的定义

    <textareaname="myText"id="myText"cols="44"rows="4"wrap="virtual"style="font-family:arial; font-size:14px; line-height:17px; height:77px; overflow:auto;"onKeyUp="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"onPaste="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"onCut="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);"onBlur="checkLimits(myForm.myText,myForm.myChars,myForm.myLines);">Text in the limited 
    textarea may never exceed the defined maximum number of rows and/or characters.</textarea>

    示例页面包含四个输入字段,用于显示TextArea中实际和最大字符和行数。

    <inputname="myChars"id="myChars"type="text"style="text-align:center; border-width:0px;"value="0"size="4"maxlength="4"readonly="readonly"><inputname="maxChars"id="maxChars"type="text"style="text-align:center; border-width:0px;"value="0"size="4"maxlength="4"readonly="readonly"><inputname="myLines"id="myLines"type="text"style="text-align:center; border-width:0px;"value="0"size="4"maxlength="3"readonly="readonly"><inputname="maxLines"id="maxLines"type="text"style="text-align:center; border-width:0px;"value="0"size="4"maxlength="3"readonly="readonly">

    代码

    <scripttype="text/javascript"><!--

    函数getLines由函数checkLimits调用,用于计算TextArea中使用的行数,变量lineHeight被设置为TextArea的style属性line-height的数值,变量tr表示TextArea中的文本,并将它的维保存为边界属性,我们把属性boundingHeight除以lineHeight以便得到文本占据的行数。

    function getLines(txtArea){
     var lineHeight = parseInt(txtArea.style.lineHeight.replace(/px/i,'')); 
     var tr = txtArea.createTextRange();
     return Math.ceil(tr.boundingHeight/lineHeight);
    }

    main函数checkLimits被事件用三个参数调用:body.onloadtextarea.onKeyUptextarea.onCut

    myForm.myText = name of the textarea 
    myForm.myChars = name of the field where we display the actual number of characters 
    myForm.myLines = name of the field where we display the actual number of linesfunction checkLimits(txtArea,countChars,countLines){

    在该示例中,maxLinesmaxChars的值是从TextArea的可见大小派生的,可以选择其他适当的值。

    var maxLines = txtArea.rows;var maxChars = txtArea.rows * txtArea.cols; 
    countChars.value = txtArea.value.length;
    countLines.value = getLines(txtArea);
    document.myForm.maxLines.value = maxLines;
    document.myForm.maxChars.value = maxChars;

    首先,检查是否达到maxCharsmaxLines限制,并且用户输入换行符或新行,在这种情况下,我们必须缩短TextArea的内容,直到没有超出限制,并中断进一步的输入警报。

    if((txtArea.value.length >= maxChars || getLines(txtArea) >= maxLines) 
     && (window.event.keyCode == 10 || window.event.keyCode == 13)) 
    { 
     while(getLines(txtArea) > maxLines) 
     txtArea.value = txtArea.value.substr(0,txtArea.value.length-2); 
     while(txtArea.value.length > maxChars) 
     txtArea.value = txtArea.value.substr(0,txtArea.value.length-2); 
     alert("chars and/or lines limit reached"); 
    }

    如果输入的字符多于maxChars允许的字符数,则TextArea的长度会自动减小,直到它长度等于TextArea并发出警报。

    elseif(txtArea.value.length> maxChars ) 
    { 
     while(txtArea.value.length> maxChars) 
     { 
     txtArea.value = txtArea.value.substr(0,txtArea.value.length-1); 
     } 
     alert("chars limit reached"); 
    }

    另外,如果文本超过行数限制,则在行数等于maxLines并发出警报之前,文本会自动减少,有一条消息,处理输入后检查限制,因此这时,一个垂直滚动条由浏览器显示,并且最后一行的文本被更多的字符减少。为了避免这种输入丢失,我们应该将TextArea的高度至少设置为 ((rows + 1) * lineHeight)

    elseif (f (countLines.value> maxLines) 
    { 
     while(countLines.value> maxLines) 
     { 
     txtArea.value = txtArea.value.substr(0,txtArea.value.length-1); 
     } 
     alert("lines limit reached"); 
    }

    最后,更新计数器。

     countChars.value = txtArea.value.length; 
     countLines.value = getLines(txtArea); 
    } //--></script>

    文本  TEX  CHAR  number  字符  Limit  
    相关文章