jQuery.fn.truncate = function(len)
{
this.val(this.val().substring(0,len));
return false;
}
jQuery.fn.maxLength = function(len)
{
var maxLengthKeyPress = new Array();
var maxLengthChange = new Array();
var appleKeyOn = false;
//the second argument should be true if len should be based on
//the maxlength attribute instead of the input
var useAttr = arguments.length>1 ? arguments[1] : false;
var handleKeyUp = function(e)
{
//if the apple key (macs) is being pressed, set the indicator
if(e.keyCode==224||e.keyCode==91)
appleKeyOn = false;
}
var handleKeyDown = function(e)
{
//if the apple key (macs) is being released, turn off the indicator
if(e.keyCode==224||e.keyCode==91)
appleKeyOn = true;
}
var handleKeyPress = function(e)
{
//if this keyCode does not increase the length of the textarea value,
//just let it go
if(appleKeyOn || (e.charCode==0&&e.keyCode!=13) || e.ctrlKey)
return;
//get the textarea element
var textarea = $(this);
//if the length should be based on the maxlength attribute instead of the
//input, use that
len = useAttr ? parseInt(textarea.attr('maxlength')) : len;
//get the value of the textarea
var val = textarea.val();
//get the length of the current text selection
var selected = Math.abs(textarea.attr('selectionStart') - textarea.attr('selectionEnd'));
selected = isNaN(selected) ? 0 : selected;
//if this is the maximum length
if(val.length==len && selected<1)
return false;
else if(val.length>len && selected<(val.length-len))
return textarea.truncate(len);
};
var handleChange = function(e)
{
//get the textarea element
var textarea = $(this);
//if the length should be based on the maxlength attribute instead of the
//input, use that
len = useAttr ? parseInt(textarea.attr('maxlength')) : len;
//truncate the textarea to its proper length
textarea.truncate(len);
};
//get the current keyup and change functions
var removeKeyPress = maxLengthKeyPress[this.selector];
var removeChange = maxLengthChange[this.selector];
//remove the keyup and change functions from any matched elements in case
//a maxlength was previously set and a new one is being set
this.die('keypress', removeKeyPress);
this.die('change', removeChange);
if(len==0 && !useAttr)
return;
//set the keyup and change functions for this element set and all future
//elements matching this selector
this.live('keypress', handleKeyPress);
this.live('change', handleChange);
this.live('keydown', handleKeyDown);
this.live('keyup', handleKeyUp);
//save the current keyup and change functions so that they can be
//remove later
maxLengthKeyPress[this.selector] = handleKeyPress;
maxLengthChange[this.selector] = handleChange;
//trigger a keypress event so that the limit will be enforced
this.keypress();
};
$(function()
{
//limit the length of all textareas with the maxlength attribute
//NOTE: setting maxlength on a textarea is NOT valid XHTML. this
//was added for coders who want to code loosely--not me!
$('textarea[maxlength]').maxLength(null, true);
});
调用方法很简单
$("textarea").maxLength(255);
<textarea>这里的输入字数将会限制在255个字符</textarea>
对中文输入不支持 貌似此插件只是判断了键盘的事件 而没有判断内容的改变
最新的jQuery
http://docs.jquery.com/Downloading_jQuery
另:貌似有时候会和某些handle事件冲突,但是还没找到原因,正在研究。
分享到:
相关推荐
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中,有时我们需要对页面上的特定文本或者关键词进行...
js和jquery分别实现对textarea字数的限制,精彩
本文将重点介绍标题为“jQuery 文本框字符限制插件 Textarea”的相关知识点,该插件主要用于限制用户在textarea文本框中输入的字符数。 在网页设计中,有时我们需要对用户的输入进行控制,例如限制评论长度、留言...
本文将详细介绍一款基于jQuery的插件,该插件专门用于为textarea添加行号,使得用户在编辑长文本时能够更加便捷地追踪和定位每一行。 首先,让我们了解这个插件的基本原理。在HTML中,textarea元素常用于收集用户...
本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...
《jQuery插件charCount:实现textarea字数统计的探索与实践》 在现代网页开发中,用户交互体验的提升已经成为了一项重要的设计考量。尤其是在社交媒体和博客平台,限制输入字符数的功能,如Twitter的280字符限制和...
在探讨“jQuery——TextArea高度自适应”的主题时,我们深入解析了如何利用jQuery库实现文本区域(TextArea)的高度自动调整,以确保其高度能够根据输入的文本量动态变化,从而提供更好的用户体验。以下是对该主题的...
本教程将详细讲解如何利用jQuery实现一个类似新浪发布微博的功能,特别是针对textarea文本框进行文字字数限制。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的核心理念是"Write Less, Do More",通过...
以下是一个简单的示例,展示了如何限制`textarea`的最大输入字数: ```html <!DOCTYPE html> 限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } <textarea id="input...
本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...
在本文中,我们将深入探讨如何使用jQuery来实现一个仿微博字数限制的功能。这个功能在许多社交媒体和在线论坛中非常常见,它可以帮助用户在输入文本时实时监测并限制字符数,确保符合平台的规定。 首先,我们需要...
本文将深入探讨“jQuery Textarea全屏插件Textarea Fullscreen”,这是一个轻量级的解决方案,用于将网页上的textarea元素转换为全屏模式,提供更好的用户输入体验。 “Textarea Fullscreen”插件,正如其名,旨在...
在介绍jQuery如何实现textarea输入字数限制之前,我们首先要了解jQuery的基础知识和textarea的HTML属性。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互,极大地...
《jQuery文本框字符限制插件——优化用户输入体验的实用工具》 在网页设计和开发过程中,有时我们需要对用户在文本框(TextArea)中的输入进行限制,以保证数据的规范性和一致性。例如,在评论区、表单填写等场景,...
本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:<html> &...
在本文中,我们将深入探讨如何使用AngularJS框架来实现一个textarea文本输入的字数限制功能。AngularJS,作为一款强大的前端开发框架,以其双向数据绑定和丰富的指令系统著称,可以方便地帮助开发者构建功能丰富的...
Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css <script type="text/javascript"> $(function(){ $('#demo'...
jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。 <!DOCTYPE html> <html lang="en"> <head> <meta ...