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)

}

　　}

}

转载于:https://www.cnblogs.com/lgl1209/p/11549171.html