jquery实现微博文字输入框 输入时显示输入字数 效果实现


Posted in Javascript onJuly 12, 2013

效果如下:

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>
Javascript 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
jquery 滚动条事件简单实例
Jul 12 #Javascript
简约JS日历控件 实例代码
Jul 12 #Javascript
javascript中自定义对象的属性方法分享
Jul 12 #Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 #Javascript
javascript中的parseInt和parseFloat区别
Jul 12 #Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 #Javascript
JS代码同步文本框内容的实例方法
Jul 12 #Javascript
You might like
php5.3 废弃函数小结
2010/05/16 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python线程的两种编程方式
2015/04/14 Python
Python 实现简单的电话本功能
2015/08/09 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
对python中各个response的使用说明
2020/03/28 Python
解决python运行启动报错问题
2020/06/01 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
超市商业计划书
2014/05/04 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android