圖一：
圖二：
圖一是選中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)
}
}
}