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
Feb 25 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
mac下如何将python2.7改为python3
2018/07/13 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python同步windows和linux文件
2019/08/29 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Django中的AutoField字段使用
2020/05/18 Python
python 操作excel表格的方法
2020/12/05 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
Python里面search()和match()的区别
2016/09/21 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
团代会主持词
2014/04/02 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
中学生打架检讨书
2014/10/13 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
优秀班主任材料
2014/12/16 职场文书
银行实习推荐信
2015/03/27 职场文书
西柏坡观后感
2015/06/08 职场文书
工商局调档介绍信
2015/10/22 职场文书
靠谱的活动总结
2019/04/16 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书