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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
javascript不可用的问题探究
Oct 01 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php防攻击代码升级版
2010/12/29 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python中的常量和变量代码详解
2018/07/25 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
详解Python3定时器任务代码
2019/09/23 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
酒店采购员岗位职责
2014/03/14 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
医院节能减排方案
2014/06/13 职场文书
学习十八大宣传标语
2014/10/09 职场文书
老公保证书怎么写
2015/02/26 职场文书
《去年的树》教学反思
2016/02/18 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python