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,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
Java中Timer的用法详解
Oct 21 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JS实现留言板功能
Jun 17 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
根德YB400的电路分析
2021/03/02 无线电
基于mysql的论坛(3)
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python Canny边缘检测算法的实现
2020/04/24 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
兽医医药专业求职信
2014/07/27 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
群众路线专项整治方案
2014/10/27 职场文书
活动宣传稿范文
2015/07/23 职场文书
期中考试后的感想
2015/08/07 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android