首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery插件之——限制textarea的篇幅

2012-11-23 
jQuery插件之——限制textarea的字数jQuery.fn.truncate function(len){this.val(this.val().substring(0,

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 楼 pch272215690 2010-12-16   这个tommy又在这里瞎扯淡,你别得瑟了。

热点排行