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数据表格插件
Jul 17 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 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 图片上添加透明度渐变的效果
2009/06/29 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
学python需要去培训机构吗
2020/07/01 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
党校自我鉴定范文
2013/10/02 职场文书
好军嫂事迹材料
2014/01/15 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
电信营业员岗位职责
2015/04/14 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技