图一：
图二：
图一是选中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)
}
}
}