/**
* 微博计数输入框插件
* 属性说明：
* counter 计数区的容器id
* max 最大字符数，默认值为150
* textClass 指定文字的样式
* normalClass 指定未超过最大字数时数字样式
* errorClass 指定已超过最大字数时数字样式
* 2012/3/8 by 崔玥
*/
(function($){
$.fn.extend({
weiboInputBox: function(options) { //插件名字
var defaults={
counter:"msg", //计数容器id
max:150,
textClass:"textClass",
normalClass:"normalClass",
errorClass:"errorClass"
};
var options=$.extend(defaults,options);
return this.each(function() {
var o=options; //得到配置参数
var obj=$(this); //得到当前对象
$("#"+o.counter).addClass(o.textClass)
.html("您可以输入<span class='"+o.normalClass+"'>"+o.max+"</span>字");
obj.bind("keypress",function(event){
var l=obj.val().length+1;
var maxlength=obj.attr("maxlength");
if(l>maxlength){
window.event.keyCode=0;
}
});
obj.bind("keyup change",function(event){
var val=obj.val();
var vLength=val.length;
//var addLen=(val.match(/[^\x00-\xff]|[\u4E00-\u9FA5]/g)||'').length; //2个英文字符计为1个
var addLen=val.length; //1个英文字符计为1个
var num=o.max-Math.ceil((vLength+addLen)/2);
if(num>=0){
$("#"+o.counter).addClass(o.textClass)
.html("您可以输入<span class='"+o.normalClass+"'>"+num+"</span>字");
}else{
$("#"+o.counter).addClass(o.textClass)
.html("已超过<span class='"+o.errorClass+"'>"+Math.abs(num)+"</span>字");
}
});
});
}
});
})(jQuery);
自己写了一个类似新浪微博的计字数的输入框，由于IE浏览器的<textarea>标记不支持maxlength属性，所以在插件中使用了press键盘事件，在事件中检查字数，如果超过上限则强制将keyCode置为0，以达到maxlength属性的目的。但是这种方法对复制、粘贴是无能为力的，所以对这种情况还是使用了截取字符串的方式，感觉还是有些缺憾，望大家提供些思路。
调用时，要指定计数区域的一个容器id，比如是一个<div>标记，这样才可以把计数的信息显示出来。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<script src="jquery.js"></script>
<script src="weibotextbox.js"></script>
<style type="text/css">
.normal{font-size:14px;color:#000000;}
.text{font-size:18px;color:#0000FF;font-family:Garamond;}
.error{font-size:18px;color:#FF0000;font-family:Garamond;}
</style>
</HEAD>
<BODY>
<div id="counter"></div>
<textarea class="textarea" id="summary" maxlength="20" row="3" col="20">
</textarea>
<script type="text/javascript">
$(document).ready(function(){
$("#summary").weiboInputBox({
counter:"counter",
max:20,
textClass:"normal",
normalClass:"text",
errorClass:"error"
});
});
</script>
</BODY>
</HTML>
分享到：
相关推荐
在本插件中，jQuery被用来处理用户与表情面板的交互，以及将选择的表情插入到文本输入框中。 “仿微博表情”是指这个插件的界面和功能设计灵感来源于微博平台的表情系统。它提供了一套丰富多样的表情图标，用户可以...
【jQuery仿微博表情插件详解】 在Web开发中，用户交互体验是至关重要的，而丰富的文字表达往往不能满足用户的需求，特别是在社交网络中。微博、QQ等社交媒体平台引入了表情功能，使得用户能够通过生动的表情传达...
在显示字数的标签中，还放置了“/140”的提示，用来告诉用户微博输入框的字数限制。 在CSS样式中，定义了“taDetail”类和“divShowNum”元素的样式。可以看到“taDetail”类设置了文本框的高度和宽度，以及文本...
在本话题中，我们将探讨“jquery微博表情插件”，这是一个利用jQuery构建的功能强大的表情插件，专为增强社交媒体交互体验而设计。 首先，让我们了解一下这个插件的核心特点： 1. **表情集成**：该插件提供了丰富...
微博表情插件的核心功能是加载并显示一套预定义的表情图标，供用户选择插入到输入框中。在本例中，"jiaoben350"可能是包含这些表情图标的资源文件，可能是一个CSS样式表或者图片文件夹。加载表情通常包括以下步骤： ...
"仿微博表情插件(支持多文本框)"的项目正是一款针对此类需求的解决方案，它能够为社交媒体、社交网络服务（SNS）以及博客评论框等提供类似微博的表情功能，并且支持在一个页面内的多个文本输入框中自由使用。...
2. **多文本框支持**：这意味着插件不仅能在单个文本输入框中插入表情，还能在多个输入框间无缝切换，满足用户在不同场景下的需求，如在评论、私信和发布动态等多个功能区域使用。 3. **兼容性**：插件需要与各种...
这个微博表情插件正是利用了这些功能，为用户提供了类似于新浪微博的输入框表情选择和插入功能。在网页中，这种插件能够极大地提高用户的输入效率，增加社交元素，使得评论或聊天更具个性化。 在实际应用中，我们...
**jQuery微博评论表情插件详解** 在Web开发中，为了增强用户体验，许多网站引入了类似微博的评论系统，其中包含了丰富的表情功能。`jQuery微博评论表情插件`就是一款专为这种需求设计的工具，它使得用户在发表评论...
《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中，为了提升用户体验，经常会引入各种各样的JavaScript插件。其中，“新浪微博表情jQuery插件”（jquery.sinaEmotion-1.0）是一个专门用于...
【微博表情jQuery插件】是一种基于JavaScript...了解并掌握以上知识点，开发者就能有效地集成和定制微博表情jQuery插件，提升网站的用户体验，特别是在社交、论坛类网站中，这类插件能极大地增强用户的互动性和趣味性。
文本框插入类似QQ，微博表情的Jquery插件
《基于AutoJS的小插件：微博签到与日常任务实现详解》 在移动互联网时代，自动化的工具成为了提升效率、节省时间的重要助手。AutoJS就是这样一款强大的自动化脚本语言，它允许用户编写JavaScript代码来控制Android...
这个插件可以帮助开发者轻松地监控用户在文本输入框中输入的字符数量，确保他们不会超过预设的限制，从而提供更好的用户体验。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax...
【jQuery仿新浪微博@功能代码】是一种常见的前端交互设计，它基于JavaScript库jQuery实现，用于在网页文本输入框中实现类似新浪微博的“@”提及功能。这个功能的主要目的是提高用户在社交媒体或评论系统中的互动体验...
在描述中提到的“默认提供了拜年，浪小花，暴走漫画等4组表情”意味着这个jQuery插件包含了多个表情包，这些表情通常以图像形式存在，分为不同的主题或类别，如节日祝福、情感表达或热门网络文化元素。例如，“拜年...
飞飞表情插件是一款专为增强在线聊天和社交媒体体验而设计的工具，它结合了QQ聊天的魔法表情和微博或空间中的表情选择框，提供了一种精致且丰富的表情选择方式。这款插件基于jQuery库，使得在网页应用中集成表情功能...
jQuery适时统计文本框输入的字符个数，这是一款来自jquery的插件，用以实现对用户输入字符的统计，当用户输入的时候，本插件可适时的显示出你输入了多少个字符，为下一步的程序控制提供变量值，类似微博的输入框字...
◆通过本微博同步本微博内容到其他微博网站 ◆判断电脑还是手机上网，并根据情况自动跳转到对应版本，电脑版和手机版功能趋向一样 ◆兼容原版“无名微博”的数据库(但建议按本源码的Access数据结构更改原有数据库...