`

How to:Set Maxlength of Textarea using jQuery/JavaScript

阅读更多

文章源自:http://viralpatel.net/blogs/set-maxlength-of-textarea-input-using-jquery-javascript/

How to:Set Maxlength of Textarea using jQuery/JavaScript

Update: The maxlength plugin is now managed at GitHub. Please contribute to make this plugin more awesome.
GitHub: https://github.com/viralpatel/jquery.maxlength

Setting up maxlength of input text are easy. Just an attribute maxlength="##" does the work. But maxlength attribute does not work with textarea. I tried writing <textarea rows=”5″ cols=”30″ maxlength=”120″></textarea> but this does not works.

So what to do if we want to fix the maxlength of a textarea?

Use following jQuery plugin for setting maxlength of any textarea on your page.

First thing for doing is to add maxlength="XX" attribute in your <textarea> tag.

<textarea maxlength="15" rows="5" cols="30" name="address"></textarea>

 Include the jQuery plugin javascript file in your html page where the textarea is.

<script language="javascript" src="jquery.maxlength.js"></script>

 And, add following code snippet at the end of your html page.

<script type="text/javascript">
    jQuery(document).ready(function($) {
             //Set maxlength of all the textarea (call plugin)
             $().maxlength();
    })
</script>

 That’s it.. This jQuery plugin will search every textarea on your page and restrict the user to enter text till the maxlength.

Following is the code of plugin

/*
 * jQuery Maxlength plugin 1.0.0
 *
 * Copyright (c) 2013 Viral Patel
 * http://viralpatel.net
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 */
 
;(function ($) {
 
    $.fn.maxlength = function(){
          
        $("textarea[maxlength], input[maxlength]").keypress(function(event){
            var key = event.which;
              
            //all keys including return.
            if(key >= 33 || key == 13 || key == 32) {
                var maxLength = $(this).attr("maxlength");
                var length = this.value.length;
                if(length >= maxLength) {                    
                    event.preventDefault();
                }
            }
        });
    }
 
})(jQuery);

 

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    maxlength:jQuery MaxLength插件

    `maxlength`是一个基于jQuery的插件,用于对输入文本的长度进行限制,特别是在文本区域(textarea)中。这个插件提供了灵活的控制方式,帮助开发者确保用户输入的内容不会超过预设的最大长度,从而保持数据的一致性...

    QTextEdit 实现 QLineEdit 的 setPlaceholderText() 和 setMaxLength ()函数

    在某些场景下,我们可能希望QTextEdit具有QLineEdit的功能,比如设置占位符文本(setPlaceholderText())和限制输入的最大长度(setMaxLength())。本篇文章将深入探讨如何在QTextEdit中实现这两个功能。 首先,让...

    JavaScript实现textarea的maxlength

    标题"JavaScript实现textarea的maxlength"指出,我们将探讨如何使用JavaScript来动态地实现和管理`textarea`的`maxlength`属性。这可能是为了在用户输入时实时检查字符数,或者在用户超过限制时给出反馈。 首先,...

    jquery 实时统计textarea内的字符个数

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本场景中,我们关注的是如何利用jQuery实现一个功能,即实时统计textarea输入框内的字符个数。这个功能常见于各种...

    jquery对textarea的长度进行验证

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。在本文中,我们将深入探讨如何利用jQuery来扩展textarea元素的功能,并结合`jquery.validate.js`库进行长度...

    JQueryValidate验证说明

    `jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件,用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则,同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...

    jquery.confine:Textarea maxlength,正确完成

    实际上,许多jQuery用户在插件创作上的首次尝试都涉及到textarea maxlength的一些变化,如下所示,它监视键盘事件并在结束时修剪textarea的值: // this is not confine... just a naive maxlength impleme

    jQuery textarea文本框输入文字字数限制提示代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,...

    jquery表单验证插件简单的会员注册表单验证代码

    jQuery是一个流行的JavaScript库,它简化了DOM操作,包括表单验证。在这个主题中,我们将深入探讨如何利用jQuery实现一个简单的会员注册表单验证。 首先,我们需要引入jQuery库。在HTML文件的`&lt;head&gt;`部分,通过...

    XML应用开发(软件品牌)-1期 3.4 课堂实践-简单类型-限定字符串长度.doc

    在XML Schema中,我们可以使用`maxLength`属性来限制字符串的最大长度。例如,要定义一个名为"password"的元素,其值的长度不能超过8个字符,可以这样写: ```xml &lt;xs:schema xmlns:xs=...

    JQuery为textarea添加maxlength属性的代码

    为了实现类似的功能,可以通过JavaScript或jQuery来动态限制`textarea`中的字符数量。 ### jQuery实现textarea的maxlength功能 jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过封装DOM操作、事件处理、...

    Vue实现动态显示textarea剩余字数

    textarea maxlength="200" @input="descInput" v-model="desc" /&gt; &lt;span&gt;{{remnant}}/200&lt;/span&gt; javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc...

    JSF+HTML标签总结

    例如,`&lt;h:inputTextarea value=”” rows=”8” style=”width:100%” /&gt;`创建了一个8行且宽度为100%的文本区域。这与HTML的`&lt;textarea&gt;`标签类似,但JSF标签可以方便地与后端数据绑定。 2. `h:inputText`是输入框...

    jquery 图片滚动 xslider 插件

    maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度; scrollobj:null,//要移动的对象 默认查找productshow下的ul; unitlen:null,//移动的单位宽或高度 默认查找li的尺寸; nowlength:null,//...

    jquery验证,javascript

    根据给定的信息,我们可以深入探讨有关使用jQuery进行表单验证的相关知识点。 ### 一、jQuery 验证插件概述 jQuery 验证插件是一种基于 jQuery 的轻量级客户端表单验证工具,它极大地简化了网页开发中的表单验证...

    textarea输入限制方法

    本文将详细介绍如何通过JavaScript实现`textarea`的输入长度限制,包括如何设置最大输入长度、如何阻止超出长度的输入、如何限制复制粘贴及鼠标拖放等操作。 #### 一、基础知识介绍 1. **`textarea`标签**:HTML中...

    JdGrid源码控件包加例子

    MaxLength : Integer; // 最大编辑长度 IntLength : Integer; // 整数部分最大长度 DecLength : Integer; // 小数部分最大长度 LineWidth : Integer; // 边框线宽 PenStyle : TPenStyle; // 线形(TPenStyle 为...

    使用Postman、Node.js和MySQL构建API.pdf

    - **Node.js**:一个基于Chrome V8引擎的JavaScript运行环境,适合构建高效且易于维护的服务端应用程序。 - **OpenAPI 3**:一种规范,用于描述RESTful API,便于API的自动化生成与文档编写。 #### 学习目标 - **...

Global site tag (gtag.js) - Google Analytics