最近做移动端的页面,遇到的内容骚味整理下,之前大部分时间,可以说几年,都没在网上整理。今个就随便扯下把。
大家可以参考下:
<!-- 一个textarea的验证剩余的字数 -->
<div class="box" style="padding:10px;border:1px solid #ccc;">
<textarea name="" id="shuru" style="border:none;display:block;width:100%;"></textarea>
<div style="text-align:right;">
<span id="shengyu">0</span>/50
</div>
</div>
<script type="text/javascript">
$("#shuru").on("input",function(){
var num = 0;
var len = $(this).val().length;
if(len>50){
$("#shengyu").text(50);
$(this).val( $(this).val().substring(0,50));
}else{
$("#shengyu").text(len);
}
// console.log($(this).val());
})
</script>
<!-- 多个textarea的验证剩余的字数 -->
<div class="box" style="padding:10px;border:1px solid #ccc;">
<textarea name="" id="shuru1" style="border:none;display:block;width:100%;"></textarea>
<div style="text-align:right;">
已输入<span id="shengyu1">0</span>/50
</div>
</div>
<div class="box" style="padding:10px;border:1px solid #ccc;">
<textarea name="" id="shuru2" style="border:none;display:block;width:100%;"></textarea>
<div style="text-align:right;">
已输入<span id="shengyu2">0</span>/100
</div>
</div>
<div class="box" style="padding:10px;border:1px solid #ccc;">
<textarea name="" id="shuru3" style="border:none;display:block;width:100%;"></textarea>
<div style="text-align:right;">
已输入<span id="shengyu3">0</span>/150
</div>
</div>
<script type="text/javascript">
function textareaLen(objId,oRemainId,numTxt){
var obj = $("#" + objId);
var oRemain = $("#" + oRemainId);
obj.on("input",function(){
var objLen = obj.val().length;
// var numTxtRel = numTxt - objLen;//numTxtRel显示剩余输入的字数,代码要相应更改 ,这里是显示已输入的字数
if(objLen > numTxt){
oRemain.text(numTxt);
obj.val(obj.val().substring(0,numTxt));
}else{
oRemain.text(objLen);
}
});
};
textareaLen('shuru1','shengyu1',50);
textareaLen('shuru2','shengyu2',100);
textareaLen('shuru3','shengyu3',150);
</script>