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