HTML代码:
<div class="item-textarea"> <textarea></textarea> <span>还可以输入<i>500</i>个文字</span> </div>
CSS代码:
.item-textarea{ position: relative; } .item-textarea textarea{ width: 100%; height: 100px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); border: 1px solid #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0.14rem; } .item-textarea span{ display: block; position: absolute; right: 6px; bottom: 7px; color: #9a9a9a; font-size: 0.12rem; } .item-textarea span i{ color: #55acef; }
简单看下当前的页面效果:
为了方便,首先引入jQuery文件,这里用到一个匿名的自调函数
(function( ){ var textArea = $(‘textarea‘); var numItem = $(‘i‘); var max = numItem.text(); //i标签中的内容,也就是最多可以显示的字符数 var curLength = textArea.val().length; //当前的字符数 textArea.attr(‘maxlength‘,max); //设置最大字符数,如果去掉的话,i标签内会出现负数 numItem.text(max - curLength); //实时更新i标签中的数量 textArea.on(‘input propertychange‘, function () { //$(this) ---> 指代textarea numItem.text(max - $(this).val().length); }); })()
时间: 2024-11-02 16:14:14