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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
在JavaScript中如何使用宏详解
May 06 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执行速度全攻略(下)
2006/10/09 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python并发和异步编程实例
2018/11/15 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python实现动态数组的示例代码
2019/07/15 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
python中操作文件的模块的方法总结
2021/02/04 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
上课打牌的检讨书
2014/02/15 职场文书
表决心的诗句大全
2014/03/11 职场文书
拓展训练激励口号
2014/06/17 职场文书
房屋维修协议书范本
2014/09/25 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
7个关于Python的经典基础案例
2021/11/07 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Nginx 常用配置
2022/05/15 Servers