`
0dragon
  • 浏览: 26309 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jQuery插件之——限制textarea的字数

阅读更多
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事件冲突,但是还没找到原因,正在研究。
1
0
分享到:
评论
1 楼 pch272215690 2010-12-16  
这个tommy又在这里瞎扯淡,你别得瑟了。

相关推荐

    jquery高亮插件(支持textarea内容高亮)

    **jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中,有时我们需要对页面上的特定文本或者关键词进行...

    js和jquery分别实现对textarea字数的限制

    js和jquery分别实现对textarea字数的限制,精彩

    jQuery 文本框字符限制插件 Textarea

    本文将重点介绍标题为“jQuery 文本框字符限制插件 Textarea”的相关知识点,该插件主要用于限制用户在textarea文本框中输入的字符数。 在网页设计中,有时我们需要对用户的输入进行控制,例如限制评论长度、留言...

    可为textarea添加行号的jquery插件

    本文将详细介绍一款基于jQuery的插件,该插件专门用于为textarea添加行号,使得用户在编辑长文本时能够更加便捷地追踪和定位每一行。 首先,让我们了解这个插件的基本原理。在HTML中,textarea元素常用于收集用户...

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

    本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...

    jQuery插件charCount模仿twitter和新浪微博的textarea字数统计.zip

    《jQuery插件charCount:实现textarea字数统计的探索与实践》 在现代网页开发中,用户交互体验的提升已经成为了一项重要的设计考量。尤其是在社交媒体和博客平台,限制输入字符数的功能,如Twitter的280字符限制和...

    jquery----TextArea高度自适应

    在探讨“jQuery——TextArea高度自适应”的主题时,我们深入解析了如何利用jQuery库实现文本区域(TextArea)的高度自动调整,以确保其高度能够根据输入的文本量动态变化,从而提供更好的用户体验。以下是对该主题的...

    jquery新浪发布微博textarea文本框限制文字字数表单

    本教程将详细讲解如何利用jQuery实现一个类似新浪发布微博的功能,特别是针对textarea文本框进行文字字数限制。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的核心理念是"Write Less, Do More",通过...

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

    以下是一个简单的示例,展示了如何限制`textarea`的最大输入字数: ```html &lt;!DOCTYPE html&gt; 限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } &lt;textarea id="input...

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

    本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...

    jquery仿微博字数限制

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿微博字数限制的功能。这个功能在许多社交媒体和在线论坛中非常常见,它可以帮助用户在输入文本时实时监测并限制字符数,确保符合平台的规定。 首先,我们需要...

    jQuery Textarea全屏插件Textarea Fullscreen

    本文将深入探讨“jQuery Textarea全屏插件Textarea Fullscreen”,这是一个轻量级的解决方案,用于将网页上的textarea元素转换为全屏模式,提供更好的用户输入体验。 “Textarea Fullscreen”插件,正如其名,旨在...

    jQuery编写textarea输入字数限制代码

    在介绍jQuery如何实现textarea输入字数限制之前,我们首先要了解jQuery的基础知识和textarea的HTML属性。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互,极大地...

    jQuery文本框字符限制插件-TextArea Counter.docx

    《jQuery文本框字符限制插件——优化用户输入体验的实用工具》 在网页设计和开发过程中,有时我们需要对用户在文本框(TextArea)中的输入进行限制,以保证数据的规范性和一致性。例如,在评论区、表单填写等场景,...

    jquery实现textarea输入框限制字数的方法

    本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:&lt;html&gt; &...

    jQuery全屏插件Textarea Fullscreen

    Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css &lt;script type="text/javascript"&gt; $(function(){ $('#demo'...

    angularjs实现textarea文本输入字数限制功能

    在本文中,我们将深入探讨如何使用AngularJS框架来实现一个textarea文本输入的字数限制功能。AngularJS,作为一款强大的前端开发框架,以其双向数据绑定和丰富的指令系统著称,可以方便地帮助开发者构建功能丰富的...

    jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...

Global site tag (gtag.js) - Google Analytics