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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JS动画定时器知识总结
Mar 23 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
javascript折半查找详解
2015/01/26 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python中正则表达式详解
2017/05/17 Python
Python 变量类型详解
2018/10/10 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
Python定时器线程池原理详解
2020/02/26 Python
Python如何输出整数
2020/06/07 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
关于期中考试的反思
2014/02/02 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
最新离婚协议书范本
2014/08/19 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2015年中个人总结范文
2015/03/10 职场文书
投诉书格式范本
2015/07/02 职场文书
2016年教师节感言
2015/12/09 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
python 爬取吉首大学网站成绩单
2021/06/02 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL