textarea限制字数提示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content="#"/>
<meta name="Description" content="#" />
<script src="http://fygift.com/script/jquery-1.8.3.min.js"></script>
<!--[if lt IE 9]><script src="../script/html5.js"></script><![endif]-->
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;}
.pl80{ padding-left: 80px!important;}
.user-center .lmf-box{padding: 0 0 40px 0;}
.user-center .lmf-box .title{ text-indent: 10px; height: 38px; font: normal 14px/38px "microsoft yahei"; color: #333; background: #fafafa; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;}
.user-center .lmf-box .table-list{ width: 94%; font: normal 12px/22px "microsoft yahei"; color: #666; margin-top: 20px;}
.user-center .lmf-box .table-list .txtbold{font: normal 18px/22px "microsoft yahei"; color: #333;}
.user-center .lmf-box .table-list td{ padding:10px 0;}
.user-center .lmf-box .table-list select.common{ width: 200px; height: 30px; border: 1px solid #cbcbcb;}
.user-center .lmf-box .table-list input.common{width: 200px; height: 28px; border: 1px solid #cbcbcb; }
.user-center .lmf-box .table-list textarea.common{max-width: 628px; resize: none; width: 628px; height: 80px; border: 1px solid #cbcbcb; text-indent: 10px;}
.user-center .lmf-box .table-list .textarea-pop{width: 650px;}
</style>
</head>
<body>
<div class="w1200">
<div class="w1200 user-center clearfix">
<div class="cont">
<div class="lmf-box">
<table class="table-list">
<colgroup>
<col style="width: 100px;" />
<col />
</colgroup>
<tr>
<td class="tr">退货说明：</td>
<td>
<textarea class="common js-change-length" placeholder="请输入退货原因"></textarea>
<p class="tr textarea-pop orange js-show-length">还可以输入<i class="js-num">200</i>个字</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
change_length_fun=function(obj,num){
$(obj).on(‘keyup‘,function(){
var len = $(obj).val();
console.log(num-len.length)
$(obj).siblings(".js-show-length").find(".js-num").text(num-len.length);
if(len.length>=num){
$(obj).siblings(".js-show-length").find(".js-num").text(0);
$(obj).val(len.substring(0,num));
}
});
/* 界面结构布局要求
<textarea class="common js-change-length" placeholder="请输入退货原因"></textarea>
<p class="tr textarea-pop orange js-show-length">还可以输入<i class="js-num">200</i>个字</p>
*/
}
change_length_fun(".js-change-length",200)
</script>
</body>
</html>

时间： 2024-07-30 16:28:52

textarea限制字数提示的相关文章

js 实现textarea输入字数提示

一.先看效果图 效果如图,当输入文字的时候,提示区域动态的显示已输入的字数和最大输入的字数.非常常用的小功能.二.知识点知识点比较简单,为了兼容性好些,我多用了几个事件input.propertychange.paste.keyup.现在好多用vue等框架写,我暂时先用jQuery写了,原因是读者比较好理解,需要其他方式也便于修改,高手估计也不用看这些东西啦哈哈哈.三.上代码.我当初学习的时候就希望多看demo,可我找到的资料往往是讲一些要点,写一些代码片段,所以我尽量的直接上代码了. <!DO

JavaScript中实现统计Textarea的字数

现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

仿校内textarea输入框字数限制效果

这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获取焦点时: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

为输入框添加字数提示

计算字符串长度,中文1,其他0.5: 1 var getByteLen=function(str) { 2 if (str == null) return 0; 3 if (typeof str != "string") { 4 str += ""; 5 } 6 var count_hanzi = str.replace(/[^\x00-\xff]/g, "01").length - str.length; 7 var count_feihanz

jquery textarea输入字符字数提示

效果: html代码: <textarea id="assayInfo" name="assayInfo" rows="3" cols="34" maxlength="30" placeholder="提示:请输入检查结果等相关信息,最多30个汉字"></textarea> <span id="wordCount">30</s

textarea 限制字数

$("textarea").keyup(function(){        //console.log($(this).val().length);        var L=$(this).val().length;        if(L>100){//100为设定的字数            $(this).val($(this).val().substring(0,100));        }    });

angularjs textarea 剩余字数统计

写页面的过程中用到了textarea的文本域,就突然想起他也可以加上剩余字数统计的这个功能. 第一个思路: 根据键盘按键按下去触发一个方法计数: <textarea cols="50" rows="10" maxlength="100" title="只能输入100个字" ng-model="text" ng-change="tolCount()"></textarea

textarea 超过字数

<textarea name="" id="FashionStatement" cols="30" rows="10"></textarea> <div id="statementRowChk"></div> $('#FashionStatement').val(''); var limitNum = 40; var pattern = '还可以输入' + l

JS控制文本框textarea输入字数限制的方法

<html> <head runat="server"> <title></title> <script type="text/javascript"> var maxstrlen = 160; function Q(s) { return document.getElementById(s); } function checkWord(c) { len = maxstrlen; var str = c.v