textarea输入文字显示已输入的字数和总字数

图一：

图二：

图一是选中textarea选中时就显示出的字数，图二是键盘输入十个文字显示的字数

 

代码：

 

// 给textarea绑定  获取/失去焦点  和　按下按键时

<div>

　　

　　<textarea id="describe" class="input-text" type="text" 

　　　　v-on:focus="func.checkMaxInput($event,250)"

　　　　v-on:keyup="func.checkMaxInput($event,250)"

　　　　v-on:blur="func.checkMaxInput($event,250) ></textarea>

　　<i class="error-desc"></i>

</div>

 

methods: {

　　checkMaxInput (event, maxLen) {

　　　　

　　// 校验

　　let obj = event.target

　　　if (obj == null || obj == undefined || obj == '') {

　　　　return

　　　}

　　　if (maxLen == null || maxLen == undefined || maxLen == '') {

　　　　maxLen = 100

　　　}

　　// 定义变量

　　var strResult

　　var $obj = $(obj)

　　var newid = $obj.attr('id') + 'msg'

　　// 如果输入的字数超过限制

　　if (obj.value.length > maxLen) {

　　　　// 去掉多余的字

　　　　obj.value = obj.value.substring(0, maxLen)

　　}

　　// 计算并显示剩余字数

　　strResult = '<span id="' + newid + '" class=\'Max_msg\' ><br/>' + (obj.value.length) +'/' + maxLen + '</span>'

var $msg = $('#' + newid)

if ($msg.length === 0) {

let errobj = $obj.parent().find('.error-desc') // class名error-desc是必选项中的标签(若为空时这个标签就会显示)

errobj.after(strResult)

} else {

$msg.html(strResult)

}

　　}

}