文章源自: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的插件,用于对输入文本的长度进行限制,特别是在文本区域(textarea)中。这个插件提供了灵活的控制方式,帮助开发者确保用户输入的内容不会超过预设的最大长度,从而保持数据的一致性...
在某些场景下,我们可能希望QTextEdit具有QLineEdit的功能,比如设置占位符文本(setPlaceholderText())和限制输入的最大长度(setMaxLength())。本篇文章将深入探讨如何在QTextEdit中实现这两个功能。 首先,让...
标题"JavaScript实现textarea的maxlength"指出,我们将探讨如何使用JavaScript来动态地实现和管理`textarea`的`maxlength`属性。这可能是为了在用户输入时实时检查字符数,或者在用户超过限制时给出反馈。 首先,...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本场景中,我们关注的是如何利用jQuery实现一个功能,即实时统计textarea输入框内的字符个数。这个功能常见于各种...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。在本文中,我们将深入探讨如何利用jQuery来扩展textarea元素的功能,并结合`jquery.validate.js`库进行长度...
`jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件,用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则,同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...
实际上,许多jQuery用户在插件创作上的首次尝试都涉及到textarea maxlength的一些变化,如下所示,它监视键盘事件并在结束时修剪textarea的值: // this is not confine... just a naive maxlength impleme
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,...
jQuery是一个流行的JavaScript库,它简化了DOM操作,包括表单验证。在这个主题中,我们将深入探讨如何利用jQuery实现一个简单的会员注册表单验证。 首先,我们需要引入jQuery库。在HTML文件的`<head>`部分,通过...
在XML Schema中,我们可以使用`maxLength`属性来限制字符串的最大长度。例如,要定义一个名为"password"的元素,其值的长度不能超过8个字符,可以这样写: ```xml <xs:schema xmlns:xs=...
为了实现类似的功能,可以通过JavaScript或jQuery来动态限制`textarea`中的字符数量。 ### jQuery实现textarea的maxlength功能 jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过封装DOM操作、事件处理、...
textarea maxlength="200" @input="descInput" v-model="desc" /> <span>{{remnant}}/200</span> javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc...
例如,`<h:inputTextarea value=”” rows=”8” style=”width:100%” />`创建了一个8行且宽度为100%的文本区域。这与HTML的`<textarea>`标签类似,但JSF标签可以方便地与后端数据绑定。 2. `h:inputText`是输入框...
maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度; scrollobj:null,//要移动的对象 默认查找productshow下的ul; unitlen:null,//移动的单位宽或高度 默认查找li的尺寸; nowlength:null,//...
根据给定的信息,我们可以深入探讨有关使用jQuery进行表单验证的相关知识点。 ### 一、jQuery 验证插件概述 jQuery 验证插件是一种基于 jQuery 的轻量级客户端表单验证工具,它极大地简化了网页开发中的表单验证...
本文将详细介绍如何通过JavaScript实现`textarea`的输入长度限制,包括如何设置最大输入长度、如何阻止超出长度的输入、如何限制复制粘贴及鼠标拖放等操作。 #### 一、基础知识介绍 1. **`textarea`标签**:HTML中...
MaxLength : Integer; // 最大编辑长度 IntLength : Integer; // 整数部分最大长度 DecLength : Integer; // 小数部分最大长度 LineWidth : Integer; // 边框线宽 PenStyle : TPenStyle; // 线形(TPenStyle 为...
- **Node.js**:一个基于Chrome V8引擎的JavaScript运行环境,适合构建高效且易于维护的服务端应用程序。 - **OpenAPI 3**:一种规范,用于描述RESTful API,便于API的自动化生成与文档编写。 #### 学习目标 - **...