仿微博字符限制效果实现代码


Posted in Javascript onApril 20, 2012

这是初始状态

仿微博字符限制效果实现代码

 

输入文字变成这样,这里会区分圆角半角,2个半角的文字算一个。

仿微博字符限制效果实现代码

 

这个是超出的样子

仿微博字符限制效果实现代码

 

如果超出了点击提交,会有红色闪动提示

仿微博字符限制效果实现代码

 

好了,效果就是这样子,都是js的。。用的话,记得加个jq文件过来。。

这里是超出只有提示,还可以超出以后截掉多余的。。不过公司项目不用,说是体验不好~~~

var oH2 = $("#spetit_word");//提示文字 
var oTextarea = $("#p_qa_content");//输入框 
var oButton = $("#bt-ico");//按钮

oTextarea.live("keyup", function () { 
Limit(oTextarea, 280, oH2); 
}) 
oButton.live("click", function () { 
if (font_count < 0 || font_count == null || font_count == 140) { 
Error(oTextarea); 
} else { 
alert('发布成功!'); 
} 
});

var font_count; function WordLength(obj) { 
var oVal = obj.val(); 
var oValLength = 0; 
oVal.replace(/\n*\s*/, '') == '' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length + oVal.match(/[^ -~]/g).length; 
return oValLength 
} 
function Error(obj) { 
var oTimer = null; 
var i = 0; 
oTimer = setInterval(function () { 
i++; 
i == 5 ? clearInterval(oTimer) : (i % 2 == 0 ? obj.css("background-color", "#ffffff") : obj.css("background-color", "#ffd4d4")); 
}, 100); 
} 
//obj-要检查的输入框, iNow-多少字, tit-提示框 
function Limit(obj, iNow, tit) { 
var oValLength = WordLength(obj); 
font_count = Math.floor((iNow - oValLength) / 2); 
if (font_count >= 0) { 
tit.html("你还可以输入<strong>" + font_count + "</strong>字"); 
return true; 
} else { 
tit.html("已超出<strong style='color:red'>" + Math.abs(font_count) + "</strong>字"); 
return false; 
} 
return font_count; 
}
Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 #Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 #Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
You might like
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript的几种写法总结
2016/09/30 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
P/Invoke是什么
2015/07/31 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
工作人员思想汇报
2014/01/09 职场文书
小学教师师德反思
2014/02/03 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
云台山导游词
2015/02/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle