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


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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
js实现百度搜索提示框
Feb 05 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python语言描述最大连续子序列和
2017/12/05 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
详解小白之KMP算法及python实现
2019/04/04 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
实习自我鉴定范文
2013/10/30 职场文书
工作睡觉检讨书
2014/02/25 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年优秀党员材料
2014/12/18 职场文书
郭明义观后感
2015/06/08 职场文书