脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微博字符限制

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

 更新时间：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;
}

您可能感兴趣的文章:

相关文章

  • JavaScript实现的选择排序算法实例分析

    JavaScript实现的选择排序算法实例分析

    这篇文章主要介绍了JavaScript实现的选择排序算法,结合实例形式分析了选择排序的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 微信小程序—setTimeOut定时器的问题及解决

    微信小程序—setTimeOut定时器的问题及解决

    这篇文章主要介绍了微信小程序—setTimeOut定时器的问题及解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 微信小程序云开发实现搜索功能

    微信小程序云开发实现搜索功能

    这篇文章主要为大家详细介绍了微信小程序云开发实现搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript中颜色模型的基础知识与应用详解

    JavaScript中颜色模型的基础知识与应用详解

    颜色模型，是用来表示颜色的数学模型。比如最常见的 RGB模型，使用 红绿蓝 三色来表示颜色。本文就来和大家讲讲JavaScript中颜色模型的基础知识与应用吧
    2023-02-02
  • window.event.keyCode兼容IE和Firefox实现js代码

    window.event.keyCode兼容IE和Firefox实现js代码

    window.event.keyCode兼容IE和Firefox具体实现代码如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • Javascript对象属性方法汇总

    Javascript对象属性方法汇总

    这篇文章主要是对Javascript对象属性方法进行了详细的汇总介绍。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • js仿360开机效果

    js仿360开机效果

    这篇文章主要为大家详细介绍了js仿360开机效果，并且封装一个带回调函数的缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript实现定时任务队列的示例代码

    JavaScript实现定时任务队列的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能,文中的示例代码讲解详细,需要的小伙伴可以参考下
    2023-11-11
  • Bootstrap Tooltip显示换行和左对齐的解决方案

    Bootstrap Tooltip显示换行和左对齐的解决方案

    小编在使用Bootstrap的Tooltip功能时遇到一些小问题，换行丢失，文字不是左对齐。下面小编给大家介绍下Bootstrap Tooltip显示换行和左对齐的解决方案，感兴趣的朋友一起看看吧
    2017-10-10
  • ES6基础之默认参数值

    ES6基础之默认参数值

    这篇文章主要介绍了ES6基础之默认参数值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02

最新评论