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

时间: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;
}

标签:微博,字符限制
0
投稿

猜你喜欢

  • 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
  • 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
  • window系统mysql无法输入和无法显示中文的解决方法

    2024-01-20 05:13:29
  • Pycharm在创建py文件时,自动添加文件头注释的实例

    2023-05-06 19:21:51
  • Python模块、包(Package)概念与用法分析

    2022-09-02 13:06:22
  • mysql sock文件存储了什么信息

    2024-01-14 11:16:43
  • 深入学习Python+Opencv常用四种图像处理操作

    2023-02-22 12:28:27
  • 利用Golang生成整数随机数方法示例

    2024-05-08 10:22:58
  • PHP PDOStatement::bindParam讲解

    2023-06-05 05:47:28
  • Numpy对于NaN值的判断方法

    2022-12-15 15:08:21
  • Python学习笔记之列表推导式实例分析

    2021-04-30 15:00:38
  • asp之家 网络编程 m.aspxhome.com