`

为textarea 增加 maxlength 屬性

    博客分类:
  • Js
阅读更多

如果只是单纯地想限制 textarea 中的字數,可用:

<textarea onkeyup="this.value = this.value.slice(0, 10)"></textarea>

<textarea onkeyup="this.value = this.value.substring(0, 10)"></textarea>

 

也可以这样子:

首先在textarea 上定义一个 maxlength 属性:
<textarea rows="2" cols="20" maxlength="10" onkeydown="checklength(this);"></textarea>
然后添加这个方法就行了!
function checklength(obj) {
        var max = obj.maxlength;
        if(max == null || max == "" || max == undefined) {
            return;
        }
        if(obj.value.length > max) {
            alert("请不要超过最大长度:" + max);
            obj.value=obj.value.substring(0,(max-1));
            return;
        }
    }

 

还可以这样子:

      在textarea中输入内容后就判断是否超出了maxLength,如果超出就按照maxLength截取textare的值,如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法,解决办法就是当textarea获取焦点时把鼠标右键失效,失去焦点时再恢复鼠标右键
      这个方法从功能上解决了textarea的maxLength问题,但还不是很完美,在输入超过maxLength的字符后光标会有闪烁,因为是截取回填,没有像input的maxLength那样真正不让输入

<script type="text/javascript">
  var textarea_maxlen = {
    isMax : function (){
      var textarea = document.getElementById("area");
      var max_length = textarea.maxLength;
      if(textarea.value.length > max_length){
        textarea.value = textarea.value.substring(0, max_length);
      }
    },
    
    disabledRightMouse : function (){
      document.oncontextmenu = function (){ return false; }
    },
    
    enabledRightMouse : function (){
      document.oncontextmenu = null;
    }


  };
</script>


<textarea id=
"area" maxLength="10"   onkeyup="textarea_maxlen.isMax()"
  onfocus=
"textarea_maxlen.disabledRightMouse()"  onblur="textarea_maxlen.enabledRightMouse()"
>
</textarea>

 

还是第一种方法方便有效

分享到:
评论

相关推荐

    JavaScript实现textarea的maxlength

    `maxlength`属性是HTML5引入的一个特性,允许我们为`textarea`设置一个最大输入字符数。 标题"JavaScript实现textarea的maxlength"指出,我们将探讨如何使用JavaScript来动态地实现和管理`textarea`的`maxlength`...

    JQuery为textarea添加maxlength属性的代码

    - 为`textarea`添加`maxlength`属性,并通过jQuery限制输入长度的做法,主要是为了改善用户体验和防止表单提交过长的文本,但最终的安全性还需要依靠后端验证。 通过上述的详细说明,我们可以看到,虽然`textarea`...

    JQuery为textarea添加maxlength属性并且兼容IE

    在提供的 `jQuery` 代码中,我们首先选择所有具有 `maxlength` 属性的 `textarea` 元素: ```javascript $(“textarea[maxlength]”) ``` 接着,我们为这些 `textarea` 添加两个事件处理函数:`keyup` 和 `blur`。...

    IE6-9placeholder、textarea-maxlength的修复;实时用户输入捕捉

    IE6-9 input和textarea元素的placeholder(占位符)属性与textarea元素的maxlength(最大长度限制)属性的修复与所有浏览器的实时输入捕捉,仅需要提供一个元素或者元素id与实时捕捉回调函数(可选)。甚至实现了各...

    textarea不能通过maxlength属性来限制字数的解决方法

    然而,HTML标准中并没有提供`maxlength`属性来限制`&lt;textarea&gt;`的字符数,因此必须采用其他方法来实现这一需求。 一种常见的限制字符数的方法是使用JavaScript(或其他脚本语言)。基本思路是通过监听`&lt;textarea&gt;`...

    详解maxlength属性在textarea里奇怪的表现

    首先,`maxlength`属性的基本用法是在`&lt;textarea&gt;`标签中设置,例如`&lt;textarea maxlength="600"&gt;`,这会限制用户输入的字符数不超过600个。通常情况下,当用户输入达到设定的限制时,额外的字符将不会被显示。此外,...

    TextArea不支持maxlength的解决办法(jquery)

    在给一个页面的TextBox 增加控制长度的控制时,简单的加了一个maxlength=’xxx’ 就行,可是测试确总是不过,原因是设置了多行模式,在这样的情况下生成的html代码就是textarea,同时maxlength属性就没有被增加上,...

    textarea长度控制

    虽然`maxlength`属性对于`textarea`是有效的,但在某些浏览器中可能会出现警告提示“undefined attribute name (maxlength)”,这是因为`maxlength`属性实际上是为`input`元素设计的,并不是`textarea`的标准属性。...

    用于Textarea的MaxLength验证的插件

    接着,你可以通过调用jQuery的选择器找到需要应用验证的textarea元素,然后调用插件方法,设置相应的maxLength属性。例如: ```javascript $(document).ready(function() { $('#yourTextareaID').maxLength({...

    控制textarea文本长度,并限制输入字数(带统计显示)

    在上述代码中,我们为`textarea`添加了一个`maxlength`属性,设置最大输入字数为100。然后,通过JavaScript获取`textarea`和显示字数统计的`span`元素,添加事件监听器`'input'`。当`textarea`内容改变时,更新字数...

    jquery.confine:Textarea maxlength,正确完成

    HTML textarea本身不像文本输入一样实现maxlength属性。 jQuery.confine是一个简单的jQuery插件,可以正确地实现此功能,避免了大多数天真的实现会遇到的许多问题,同时还可以选择利用jQuery 1.4中的新HTML5标准和...

    textarea输入限制方法

    2. **`maxlength`属性**:可以为`textarea`添加`maxlength`属性来限制用户输入的最大字符数。 3. **JavaScript事件处理**:通过JavaScript可以监听并处理各种事件,如用户输入时触发的`onkeypress`事件、失去焦点时...

    textarea去除多余空格和回车的方法及其属性

    本文将详细介绍如何实现这一目标以及`&lt;textarea&gt;`的相关属性。 1. 错误解决方法: 在编写HTML时,`&lt;textarea&gt;`标签的闭合方式对内容的处理至关重要。错误的做法是将`&lt;/textarea&gt;`放在新的一行,这会导致换行符和...

Global site tag (gtag.js) - Google Analytics