jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數(shù) 效果實現(xiàn)
更新時間：2013年07月12日 15:04:15 作者：
這篇文章介紹了用jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字數(shù)的效果，有需要的朋友可以參考一下
效果如下：
代碼如下：
復制代碼 代碼如下:
<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事件綁定和委托中on()、bind()、live()、delegate()的用法,具有一定的學習與借鑒價值,需要的朋友可以參考下2014-11-11
本文通過實例代碼給大家介紹了jquery 與css相結合實現(xiàn)的下拉列表功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了基于jQuery實現(xiàn)放大鏡效果，一般應用于放大查看商品圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
jquery下拉select控件操作方法分享(jquery操作select)
這篇文章主要介紹了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以參考下2014-03-03
JQuery實現(xiàn)動態(tài)添加刪除評論的方法
這篇文章主要介紹了JQuery實現(xiàn)動態(tài)添加刪除評論的方法,涉及jQuery處理鼠標事件及json數(shù)據(jù)的相關技巧,需要的朋友可以參考下2015-05-05
找了個時間看了下EasyUI插件，對它的插件感覺是很舒服，特地把Easy UI的大部分功能屬性做了一下匯總。使用easyUI的朋友可以收藏下。2011-01-01
jQuery ajax serialize()方法的使用以及常見問題解決
使用ajax時，常常需要拼裝input數(shù)據(jù)為'name=abc&sex=1'這種形式，用JQuery的serialize方法可以輕松的完成這個工作接下來介紹jQuery ajax - serialize() 方法定義和用法，感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01
Jquery EasyUI實現(xiàn)treegrid上顯示checkbox并取選定值的方法
這篇文章主要介紹了Jquery EasyUI實現(xiàn)treegrid上顯示checkbox并取選定值的方法的相關資料,需要的朋友可以參考下2016-04-04
今天小編就為大家分享一篇解決jQuery使用append添加的元素事件無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于jQuery實現(xiàn)復選框的全選 全不選 反選功能
本文分享一段基于jQuery實現(xiàn)的復選框全選、全不選、反選功能的代碼，有需要的小伙伴直接帶走吧2014-11-11