lkj0 2013-05-24
文章源自:http://viralpatel.net/blogs/set-maxlength-of-textarea-input-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); textarea标签是我们经常使用的一个html标签,主要是在输入较长的文本时,可以实现换行等效果。下面引用一个他的基本使用:。<textarea cols="50" rows="10" id="co