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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue登录注册实例详解
Sep 14 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php获取系统变量方法小结
2015/05/29 PHP
教大家制作简单的php日历
2015/11/17 PHP
php递归函数怎么用才有效
2018/02/24 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python如何获取服务器硬件信息
2017/05/11 Python
Python实现的计算器功能示例
2018/04/26 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
通信工程毕业生求职信
2013/11/16 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
高中军训感言500字
2014/02/24 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
应聘教师自荐书
2014/06/16 职场文书
同志主要表现材料
2014/08/21 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技