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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JS实现带阴历的日历功能详解
Jan 24 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
node.js基础知识汇总
2020/08/25 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python简明入门教程
2015/08/04 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python图书管理系统
2020/04/05 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物