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

 更新时间:2012年04月20日 01:03:39   作者:  
字符限制公司项目中有个这样的东西,大家用微博的都明白哈

这是初始状态

 

输入文字变成这样,这里会区分圆角半角,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;
}

相关文章

  • Swiper.js实现移动端元素左右滑动

    Swiper.js实现移动端元素左右滑动

    这篇文章主要为大家详细介绍了Swiper.js实现移动端元素左右滑动 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS实现可改变列宽的table实例

    JS实现可改变列宽的table实例

    本文为大家详细介绍下通过JS实现可改变列宽的table,具体的思路及代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS控制对象移动效果

    JS控制对象移动效果

    用js实现对象的移动,不错的应用
    2008-09-09
  • JavaScript使用AOP编程思想实现监听HTTP请求

    JavaScript使用AOP编程思想实现监听HTTP请求

    这篇文章主要为大家详细介绍了如何在JavaScript使用AOP编程思想实现监听HTTP请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • JQuery加载图片自适应固定大小的DIV

    JQuery加载图片自适应固定大小的DIV

    在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div大小时图片 自动适应div 的大小,实现思路如下,感兴趣的朋友可以了解下
    2013-09-09
  • JS限制文本框只能输入数字和字母方法

    JS限制文本框只能输入数字和字母方法

    这篇文章主要介绍了JS限制文本框只能输入数字和字母方法,本文给出了限制只能输入数字、限制只能输入字母、限制只能输入数字和字母3种脚本,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现商品放大镜效果

    JavaScript实现商品放大镜效果

    这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript实现列表分页功能特效

    JavaScript实现列表分页功能特效

    最近在做一个小项目,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。
    2015-05-05
  • layui之数据表格--与后台交互获取数据的方法

    layui之数据表格--与后台交互获取数据的方法

    今天小编就为大家分享一篇layui之数据表格--与后台交互获取数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 基于JavaScript实现浏览器添加收藏功能

    基于JavaScript实现浏览器添加收藏功能

    今天搞项目的时候为了实现浏览者实现添加收藏的功能,特地了解了一下相关的API,整理了一段代码帮助大家实现浏览器添加收藏功能,感兴趣的朋友跟随小编一起看看吧
    2023-02-02

最新评论