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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
对vue中methods互相调用的方法详解
Aug 30 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网站在线人数统计
2008/04/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
js更优雅的兼容
2010/08/12 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python人脸识别初探
2017/12/21 Python
python3个性签名设计实现代码
2018/06/19 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
工商管理应届生求职信
2013/10/07 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫