首页 / JAVASCRIPT / 仿微博字符限制效果实现代码_javascript技巧

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了仿微博字符限制效果实现代码_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1472字，纯文字阅读大概需要3分钟。

内容图文

这是初始状态

仿微博字符限制效果实现代码_javascript技巧 - 文章图片

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

仿微博字符限制效果实现代码_javascript技巧 - 文章图片

这个是超出的样子

仿微博字符限制效果实现代码_javascript技巧 - 文章图片

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

仿微博字符限制效果实现代码_javascript技巧 - 文章图片

好了，效果就是这样子，都是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("你还可以输入" + font_count + "字");
return true;
} else {
tit.html("已超出" + Math.abs(font_count) + "字");
return false;
}
return font_count;
}

内容总结

以上是互联网集市为您收集整理的仿微博字符限制效果实现代码_javascript技巧全部内容，希望文章能够帮你解决仿微博字符限制效果实现代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/314935.html

来源：【匿名】