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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php 删除cookie方法详解
2014/12/01 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
简单实现php上传文件功能
2017/09/21 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Sanic框架配置操作分析
2018/07/17 Python
用Python shell简化开发
2018/08/08 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
劲霸男装广告词改编版
2014/03/21 职场文书
关爱老人标语
2014/06/21 职场文书
工作失职检讨书范文
2015/05/05 职场文书
公司车辆管理制度
2015/08/04 职场文书
教师师德承诺书2016
2016/03/25 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android