jquery实现微博文字输入框 输入时显示输入字数 效果实现
2018-10-12 14:02
666 查看
效果如下:
代码如下:
<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实现微博文字输入框——输入时显示输入字数
- Android中实现在矩形框中输入文字显示剩余字数的功能
- jquery实现表单输入时提示文字滑动向上效果
- Jquery实现TextArea 字数限制,并显示当前的输入字符数
- jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- jquery实现表单输入时提示文字滑动向上效果
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- 利用Jquery实现,可输入搜索文字下拉选效果
- jquery实现marquee效果(文字或者图片的水平垂直滚动)
- jquery实现仿新浪微博评论滚动效果
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- jquery简单图片切换显示效果实现方法
- JS实现title标题栏文字不间断滚动显示效果
- js实现input框文字动态变换显示效果
- javascript实现鼠标移到Image上方时显示文字效果的方法
- jQuery实现文字横向滚动效果
- jQuery实现可高亮显示的二级CSS菜单效果