zoukankan      html  css  js  c++  java
  • 在一个TextArea中如何限制行数和字符数

    在网上,已经有很多关于在一个textbox限制允许的字符数量。但是如果需要,在textbox中如何去统计和限制行数呢。这里有一个解决方案,使用客户端的JavaScript去限制TextArea的内容为指定的字符数量和指定的行数(不一定就等于TextArea中可见的行数)。

      我们能通过使用cols 和rows 属性或者 width 和height样式属性,定义可见的宽度和高度,但是我们不能通过使用HTML或者CSS限制字符数量或者文本的行数。幸运的是我们能为TextArea的内容创建一个textRange对象。这个 JavaScript对象有一个只读的boundingHeight属性,通过它我们能够检索出textRange的高度的像素值。因此,我们只要将 textRange的高度除以TextArea的lineHeight(像素值),就能得到TextArea使用的行数。

      例子:

      TextArea的定义:

      代码

    <textarea name="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>

    Attributes:

      我们分配name和id给我们的TextArea,我们定义它可见的大小(rows和cols)。建议设置wrap属性为"virtual" 或者 "physical" 或者 "hard",但是不要设置为"off"。

      Style properties:

      font-family: 我们能使用我们可能会使用比例字体(如Arial)或等宽字体(如Courier)。第一种情况,我们反而会达到字符数限制。第二种情况,我们最可能达到行数的限制。

      font-size: 在没有scrollbar情况下,如果我们希望显示允许的所有行,我们知道font-size,选择一个适当的line-height ,来计算TextArea的高度。

      line-height: 我们必须设置TextArea的line-height为一像素值,与给出的font-size相对应。

      height: 在没有scrollbar情况下,如果我们想要显示所有的行,我们不得不设置height至少为(rows*line-height)+(line-height/2)。但我们可以很自由忽略这个属性,选择任何其他的适合的高度。

      Event handlers:

      * onKeyUp:一个主要的事件来处理,当有文本输入或者使用键盘删除的时候,调用checkLimits脚本来检查TextArea的限制条件。

      * onPaste 和 onCut: 但文本被粘贴到TextArea或者删除时调用脚本checkLimits.

      * onBlur  当TextArea失去焦点的时候,做最后一次检查。

      将能非常自由的使用其他的事件处理:例如onKeyPress等等,这取决于你的应用程序的需要。TextArea可能是空值或者包含了一些默认的文本,就像例子中显示的一样。

      这个例子页面时包含了四个input来显示TextArea字符数和行数实际数量和最大数量。

      代码

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

    代码:

    <script type="text/JavaScript">
    <!--

      函数getLines被函数checkLimits调用来计算在TextArea使用的行数。变量lineHeight被设置成我们TextArea的样式属性line-height的数量值。变量tr代表我们TextArea的文本,由bounding properties持有它的尺寸大小。我们将boundingHeight除以lineHeight来得到我们文本占有的行的数量。

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

      主函数checkLimits带三个参数,它将被这些事件调用:body.onload, textarea.onKeyUp, textarea.onCut, textarea.onPaste和textarea.onBlur:

      代码

    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 lines
     
    function checkLimits(txtArea,countChars,countLines){

      在这个例子中,maxLines和maxChars的值来源于TextArea的可见大小,但是我们也可以选择任何一个适当的值。我们设置统计的countChars为txtArea.alue的长度,countLines为函数getLines(txtArea)的返回值。在页面的myForm.myChars 和 myForm.myLines上显示它们。我们也在页面上显示行数和字符数的限制值。

      代码

    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;

    首先,我们检查是否maxChars 或者  maxLines的限制是否达到。用户输入一新行时,在这个情况下,我们必须要缩短文本区内容,直到超出限制,通过弹出提示框,中断进一步输入。

      代码

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

      如果输入了字符数量超过了最大允许数量,TestArea的长度会自动减少到txtArea的数量,会弹出提示框。

      代码

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

      同样,如果文本超过了行数的限制。也会自动减少直到等于maxLines,弹出提示框。有一件事情必须说起,限制的检查在input处理完之后,因此,片刻,一个垂直的scrollbar在会显示在浏览器上。最后一行会减少一些多余的字符。为了避免输入的丢失,我们设置txtArea的Height为((rows + 1) * lineHeight).

      代码

    else if (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>

      这些代码只在IE7.0中测试过。在一些情况下,限制行的数量也是必须的。例如,当文本存入数据库字段的时候,我们要统计字符的数量。进一步,我们利用boundingwidth限制TextArea的宽度,而不是由浏览器自动换行。

      原文:http://www.codeproject.com/KB/scripting/TALimit.ASPx


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/mane_yao/archive/2010/04/20/5505516.aspx

  • 相关阅读:
    Maven与Eclipse整合使用
    Maven学习总结(五)——聚合与继承【如果想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合】
    Maven的核心概念:maven仅仅定义了抽象的生命周期,具体的任务都是交由插件完成的
    使用Maven构建项目---【重点需要掌握:Jetty和Maven两种项目骨架】
    Maven项目构建过程练习
    maven编码gbk的不可映射字符”解决办法
    Maven
    Spring Aop的方法执行简单模型
    2016年看过的书
    ExcelReader
  • 原文地址:https://www.cnblogs.com/mane/p/1829948.html
Copyright © 2011-2022 走看看