JavaScript仿微博输入框效果(案例分析)


Posted in Javascript onDecember 06, 2016

这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果。

效果图:

JavaScript仿微博输入框效果(案例分析)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿微博输入框效果</title>
<script src="jquery.js"></script>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea> 
<sapn>您还可以输入<strong style="color:red">140</strong>个字</sapn>
</body>
<script>
//给文本域响应键盘按下事件
$('textarea').keyup(function(){
var maxLength = 140;
var len = $(this).val().length;
$('strong').text(maxLength-len);
//判断输入是否超过140个数
if(parseInt($('strong').text()) < 0){
$('strong').text(0);
//截取前140个字符并重新塞到文本域中
var content = $(this).val().substring(0,140);
$(this).val(content);
}
});
</script>
</html>

以上所述是小编给大家介绍的JavaScript仿微博输入框效果(案例分析),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
switchery按钮的使用方法
Dec 18 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 #Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
利用JS轻松实现获取表单数据
Dec 06 #Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
You might like
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
关于Python数据结构中字典的心得
2017/12/04 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python爬虫开发与项目实战
2020/12/16 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
岗位职责的定义
2013/11/10 职场文书
医科大学生的自我评价
2013/12/04 职场文书
骨干教师培训制度
2014/01/13 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
网络技术专业求职信
2014/05/02 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
学生会任命书范本
2015/09/21 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书