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

这是初始状态

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

相关推荐

  • 简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的jQuery 写的仿新浪微博 向下滚动效果 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $u

  • JS 仿腾讯发表微博的效果代码

    JS 仿腾讯发表微博的效果代码

    最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery那种形式?我当时回答的是:每个人编写代码有每个人的习惯.但是我更想表达的是:这种编码个人觉得 有一个很大的优点,我不是非常依赖于Jquery框架,因为不同的公司有不同的框架 比如在淘宝用的kissy框架 在支付宝用的是支付宝框架 在百度用的是百度框架 在腾讯有腾讯的前端js框架 假如我的编写代码太依赖于jquery 那假如其他

  • Jquery实现仿腾讯微博发表广播

    Jquery实现仿腾讯微博发表广播

    前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学习学习Jquery,支持我吧,呵呵,这几天的学习Jquey使我感觉到其实Jquery的使用并不是很难,就我感觉Jquery只要把选择器学的差不多,其他的基本都可以迎刃而解,多了解一些方法,事件等等.所以我在这里实现了一个Jquery实现仿腾讯微薄的广播发表. 1. 首先新建HTML页面和介绍我要实现

  • js仿百度贴吧验证码特效实例代码

    js仿百度贴吧验证码特效实例代码

    今天看到有百度验证码挺有意思的,就把它仿下来了. 利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对.然后提示[答案正确!]或[答案错误!], 以后有空再去做成程序,先分享给大家! 效果图如下: 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

  • 通过Jscript中@cc_on 语句识别IE浏览器及版本的代码

    激活条件编译支持. @cc_on 备注 @cc_on 语句激活脚本引擎中的条件编译. 强烈推荐在注释中使用 @cc_on 语句,以使不支持条件编译的浏览器将您的脚本视为有效语法而接受它: /*@cc_on*/ // The remainder of the script.或者,在注释外的一个 @if 或 @set 语句也将激活条件编译. 要求 版本 3 请参见 参考 @if...@elif...@else...@end 语句 @set 语句 复制代码 代码如下: /*@cc_on @if (@_

  • JS实现模仿微博发布效果实例代码

    JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • js完美实现@提到好友特效（兼容各大浏览器）

    js完美实现@提到好友特效（兼容各大浏览器）

    要求 1.输入@时,弹出匹配的好友菜单 2.光标进入包含有"@好友"的标签时,弹出菜单 3.按backspace删除时,如果光标前面是包含有"@好友"的标签,弹出菜单 4.兼容ie,firefox. 具体做法 针对要求一,很自然的会想到对输入框绑定事件.这里要绑定mousedown,而不是mouseup.因为如果是mouseup的话,用event.preventDefault()是无法阻止键盘输入@的.另外,这里在事件回调中用return false也是起不了作用的

  • Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({

  • python通过正则查找微博@(at)用户的方法

    本文实例讲述了python通过正则查找微博@(at)用户的方法.分享给大家供大家参考.具体如下: 这段代码用到了python正则的findall方法,查找所有被@的用户,使用数组形式返回用户昵称 import re users = re.findall(r'@([\u4e00-\u9fa5\w\-]+)','nihao @dfugo @jb51 haha') print(users) 返回结果如下: ['dfugo', 'jb51'] 希望本文所述对大家的Python程序设计有所帮助.

  • 仿新浪微博登陆邮箱提示效果的js代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

  • jquery实现textarea输入字符控制(仿微博输入控制字符)

    jquery实现textarea输入字符控制(仿微博输入控制字符)

    效果图如下: JQUERY 代码: 复制代码 代码如下: var text=$(".release textarea").val();//获取输入框的值 var counter=text.length; //获取输入框的值 $("#numtj em").text(500-counter); $(document).keyup(function() { var text=$(".release textarea").val(); var count

随机推荐