仿校内textarea输入框字数限制效果

2010年06月9日作者： Artcss 类别：个人随笔

1133 views | 发表评论

分享到: 百度 QQ空间微博豆瓣人人开心 QQ书签

这是一个仿校内textarea回复消息输入框限制字数的效果，具体表现如下：

普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮

PS:上边那个小三角可不是用的图片。

普通状态效果如下：

获取焦点时：

字数限制的javascript代码如下:

Download oTab.js

$(function(){
	function maxLimit(){
		var num=$(this).val().substr(0,140);
		$(this).val(num);
		$(this).next().children("span").text($(this).val().length+"/140");
	};
	$("#textlimit").keyup(maxLimit);//调用方法
});

点击下面“运行”直接查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="Web Layout:LiQiang.Gu;" /> <meta name="description" content="前端思考 web前端前端制作 artskin www.artcss.com" /> <meta name="Keywords" content="前端思考 web前端前端制作 artskin www.artcss.com" /> <title>textarea的字数限制javascript代码</title> <script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script> <style type="text/css">  </style> <script type="text/javascript"> $(function(){ function maxLimit(){ var num=$(this).val().substr(0,140); $(this).val(num); $(this).next().children("span").text($(this).val().length+"/140"); }; $("#textlimit").keyup(maxLimit); $("#textlimit").focus(function(){ $(this).addClass("focus").next().show(); if($(this).val() == $(this).attr("title")){ $(this).val(""); } }); $("#textlimit").blur(function(){ if($(this).val().length > 0){ $(this).addClass("focus").next().show(); }else{ $(this).removeClass("focus").next().hide(); } if($(this).val() == ""){ $(this).val($(this).attr("title")); } }); }); </script> </head> <body> <div class="layout"> <b></b> <div class="box"> <textarea name="textarea" id="textlimit" cols="45" rows="1" title="添加回复">添加回复</textarea> <p> <input class="input-button" type="button" value="回复" /> <span class="textCount">0/140</span> </p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

经jQuery中文群的一位同仁指点，现把限制字数的子数值用一个参数传进来，以便函数重复利用

仿校内textarea输入框字数限制效果

字数限制的javascript代码如下:

点击下面“运行”直接查看效果

相关博文

相关日志

给作者留言：

关于

RSS订阅前端思考

友情链接

仿校内textarea输入框字数限制效果

字数限制的javascript代码如下:

点击下面“运行”直接查看效果

相关博文

相关日志

给作者留言：

关于

RSS订阅前端思考

常用标签

友情链接