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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
react中props 的使用及进行限制的方法
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
德生1994机评
2021/03/02 无线电
基于mysql的论坛(2)
2006/10/09 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery等待效果示例
2014/05/01 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
bat和python批量重命名文件的实现代码
2016/05/19 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
基于python实现坦克大战游戏
2020/10/27 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
零件设计自荐信范文
2013/11/27 职场文书
通知的写法
2015/04/23 职场文书
永远是春天观后感
2015/06/12 职场文书
python办公自动化之excel的操作
2021/05/23 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android