jQuery动态计算文本框内的可输入字数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动态计算文本框内的可输入字数</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/textSum.min.js"></script>
<style type="text/css">
*{ box-sizing:border-box;}
body{ background:#f4f4f4;}
span{ font-size:12px;}
p{ margin:5px 0;}
.textWrap{ margin:10px 0 20px;}
.textWrap input,.textWrap textarea{ display:inline-block; background:#fff; border-radius:4px; border:1px solid #ddd; height:34px; width:100%; padding:7px 12px; padding-right:80px; line-height:20px; font-size:14px; color:#333;}
.textWrap textarea{ height:80px;}
</style>
</head>
<body>
<br>
<div style="margin:50px auto; width:60%;">
<p><span>input maxlength = 10</span></p>
<div class="textWrap wordSumTotal">
<input type="text" name="" maxlength="10">
</div>
<p><span>input maxlength = 20</span></p>
<div class="textWrap wordSumTotal">
<input type="text" name="" style="height:46px;" maxlength="20">
</div>
<p><span>input maxlength 缺省时，默认maxlength = 10</span></p>
<div class="textWrap wordSumTotal">
<input type="text" name="">
</div>
<p><span>textarea maxlength = 20</span></p>
<div class="textWrap wordSumTotal">
<textarea name="" cols="" rows="" maxlength="200"></textarea>
</div>
<br>
<p>使用方法：</p>
<p><pre><code>$('class or element').textSum();</code></pre></p>
</div>
<script type="text/javascript">
$(function(){
$('.wordSumTotal').textSum();
});
</script>
</body>
</html> 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17