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 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP读取Excel类文件
2017/05/15 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
DOM精简教程
2006/10/03 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
开办化妆品公司创业计划书
2013/12/26 职场文书
九年级体育教学反思
2014/01/23 职场文书
电子专业自荐信
2014/07/01 职场文书
门面房租房协议书
2014/08/20 职场文书
作弊检讨书范文
2015/05/06 职场文书
美容院员工规章制度
2015/08/05 职场文书
车位出租协议书范本
2016/03/19 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers