jquery实现微博文字输入框并统计字数的实例
- 更新时间：2020-02-06 08:38:24
- 编辑：赵巍奕
参考资料
- 犀利开发：jQuery内核详解与实践 PDF 电子书 / 131 MB / 朱印宏 推荐度：
- 《从0到1:jQuery快速上手》课件,源码,习题答案 配套资源 / 2.8 MB / 莫振杰 推荐度：
- 《轻松玩转jQuery》源代码 配套资源 / 649.46 KB / 蓝健 推荐度：
- 《jQuery权威指南（第2版）》示例源代码 配套资源 / 10.1 MB / 陶国荣 推荐度：
- 移动互联网之路：HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通 PDF 电子书 / 92.1 MB / 李晓斌 推荐度：
正文内容
jquery实现微博文字输入框 输入时显示输入字数 效果实现
效果如下：
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.taDetail{height: 50px; width:350px; text-align:left; vertical-align:top;}
#divShowNum{ font-size:14px;
width: 50px;
height: 18px;
border: none;
padding: 5px;
padding-bottom: 15px;
display: none;
position:absolute;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"; ?>" ></script>
<script type="text/javascript" src="js/jquery.tools.min.js"; ?>" ></script>
<script>
$(document).ready(function(){
$(".taDetail").bind("click",showNum)
.bind("keyup", showNum)
.bind("blur", function(){$("#divShowNum").hide();});
});
var showNum = function(){
var d = $(this);
var pos = d.offset();
var t = pos.top + this.offsetHeight - 22; // 弹出框的下边位置
var l = pos.left + this.offsetWidth - 60; // 弹出框的右边位置
var num = this.value.length;
$("#changeNum").html(num);
$("#divShowNum").css({ "top": t, "left": l }).show();
}
</script>
</head>
<body>
<textarea class="taDetail" ></textarea>
<br/>
<textarea class="taDetail" ></textarea>
<div id="divShowNum" ><span id="changeNum"></span>/140</div>
</body>
</html>
jquery相关教程
-
jquery引入外部CDN失效时如何引入本地jq库
这篇文章主要介绍了网站加载第三方CDN，如果jQuery库不成功则加载本地的jquery的实现代码,需要的朋友可以参考下
发布时间：2020-01-22
-
jquery弹出框插件jquery.ui.dialog用法分析
这篇文章主要介绍了jquery弹出框插件jquery.ui.dialog用法,结合实例形式分析了弹出框插件jquery.ui.dialog的功能、下载、使用方法与相关注意事项,需要的朋友可以参考下
发布时间：2019-07-24
-
JavaScript和jQuery实战手册
JavaScript可以大大改进网页的动画、交互性和视觉效果，但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识，展示了如何使用jQuery（即预先写好的JavaScript代码库）来节省时间和精
大小：103 MBJavaScript电子书
-
疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战
大小：131.7 MB前端开发电子书
-
jQuery实战从入门到精通
本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术，适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书
大小：189.1 MBjQuery电子书
-
jQuery EasyUI开发指南
使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种
大小：48.4 MBjQuery电子书
-
PHP与jQuery开发实例
这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目
大小：9.8 MBPHP开发
-
Bootstrap与jQuery UI框架设计
随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相
大小：180 MBjQuery电子书
-
锋利的jQuery
《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版，事例选用全新升级的UI，编码更合乎词义化；提升jQueryMobile的章节目录；提升jQuery版本号转变的章节目录；提升jQuery特性提升和方法的章节目
大小：194.9 MBjQuery电子书
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外
大小：99.0 MBjQuery电子书
