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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue + axios get下载文件功能
Sep 25 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHP 上传文件大小限制
2009/07/05 PHP
PHP操作xml代码
2010/06/17 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python实现股市信息下载的方法
2015/06/15 Python
python 性能优化方法小结
2017/03/31 Python
python中的随机函数小结
2018/01/27 Python
python实现人民币大写转换
2018/06/20 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
《黄河颂》教学反思
2014/02/07 职场文书
上课打牌的检讨书
2014/02/15 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
二审答辩状格式
2015/05/22 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python异常中else的实例用法
2021/06/15 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
一文搞懂Python Sklearn库使用
2021/08/23 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python