仿微博字符限制效果实现代码
时间:2024-04-28 09:51:18
这是初始状态
输入文字变成这样,这里会区分圆角半角,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;
}
标签:微博,字符限制
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php实现断点续传大文件示例代码
2024-04-28 09:45:17
解决python打不开文件(文件不存在)的问题
2021-10-15 02:39:46
理解Python垃圾回收机制
2023-01-19 23:39:32
MySQL数据库的触发器的使用
2024-01-19 07:17:37
golang指数运算操作
2024-01-30 22:35:53
Python Flask-Login模块使用案例详解
2021-10-14 21:01:17
![](https://img.aspxhome.com/file/2023/0/90590_0s.png)
ChatGPT如何写好Prompt编程示例详解
2022-06-30 03:55:24
解析如何加快mysql编译的速度
2024-01-15 07:26:55
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2022-12-29 07:15:34
怎样删除Git中缓存的用户名和密码
2023-08-12 23:56:55
JS版图片放大镜效果
2024-04-30 08:50:57
![](https://img.aspxhome.com/file/2023/1/132661_0s.jpg)
window系统mysql无法输入和无法显示中文的解决方法
2024-01-20 05:13:29
![](https://img.aspxhome.com/file/2023/4/88494_0s.jpg)
Pycharm在创建py文件时,自动添加文件头注释的实例
2023-05-06 19:21:51
![](https://img.aspxhome.com/file/2023/6/135196_0s.jpg)
Python模块、包(Package)概念与用法分析
2022-09-02 13:06:22
![](https://img.aspxhome.com/file/2023/7/117277_0s.png)
mysql sock文件存储了什么信息
2024-01-14 11:16:43
深入学习Python+Opencv常用四种图像处理操作
2023-02-22 12:28:27
![](https://img.aspxhome.com/file/2023/8/134658_0s.jpg)
利用Golang生成整数随机数方法示例
2024-05-08 10:22:58
PHP PDOStatement::bindParam讲解
2023-06-05 05:47:28
Numpy对于NaN值的判断方法
2022-12-15 15:08:21
![](https://img.aspxhome.com/file/2023/2/75282_0s.png)
Python学习笔记之列表推导式实例分析
2021-04-30 15:00:38