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

这篇文章介绍了用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>

 

时间: 2024-12-26 21:56:27

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

jquery实现鼠标滑过小图时显示大图的方法

 这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

jquery左边浮动到一定位置时显示返回顶部按钮_jquery

复制代码 代码如下: <script> $(function(){ $(window).bind('scroll',function(){ if ($(document).scrollTop() >200) { $(".asd-return").show(1); }else{ $(".asd-return").hide(1); } }) $(".asd-return").click(function(){ $('body,htm

jquery全屏文字与图片同步切换焦点图效果

原理:利用jq的自定义动画 animate() 这个函数 完成整个过程,也就是动画的前后和 距离做简单的计算就可以了. 因为要让它们要有动画的前后顺序,所以隐藏 和显示 的代码不能合并成一行. 代码内都注释,方便阅读,那么就不做解析了. 插件使用方式: 使用前请将 CSS HTML 完整的复制.  代码如下 复制代码 $(window).p25({     con:$('.p24CCol'),    //每一个内容     btn:$('.p24BCol'),    //按钮     tit:'

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery

这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快. 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可

javascript实现鼠标移到Image上方时显示文字效果的方法_javascript技巧

本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法.分享给大家供大家参考.具体如下: 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

如何修改PE启动时显示的文字

  如何修改PE启动时显示的文字         PE启动时显示的文字大家都很熟悉了,但中文的PE启动文字你就没见过吧,下面就跟着来自己打造一下: 一.PE系统中需要修改的第一个地方: 需要修改"Setupldr.bin"文件,将"Loading RAMDISK image..."改为"正在加载RAMDISK映像..." 二.PE系统中需要修改的第二个地方: 一样修改"Setupldr.bin"文件,将"Please

jquery实现表单输入时提示文字滑动向上效果_jquery

本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g

js jquery-JS/jQuery实现默认显示部分文字点击按钮显示全部内容

问题描述 JS/jQuery实现默认显示部分文字点击按钮显示全部内容 <!doctype html> JS实现默认显示部分文字,点击按钮显示全部 民间机构提前3天预报大理地震 地震局称违法 17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注. 记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息.对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但民间机构对外公开发布地震预