js輸入框限定輸入框的字?jǐn)?shù),以下程式碼
<input type='text' onkeyup="checkNumber($(this))">
function checkNumber($this){
let val=$this.val();
if(val.length > 10 ){
alert('字?jǐn)?shù)超過10');
}
}
在實(shí)際過程中,發(fā)現(xiàn)以下問題,如圖:
在輸入法中是,先顯示字母,再將字母拼音轉(zhuǎn)換成漢字。故可能在輸入的時(shí)候,字母加漢字已超過限定的字?jǐn)?shù),該如何解?
擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...
我們?cè)O(shè)想下,input也輸入全英文的、或者中文,需要限定長(zhǎng)度小於10,那麼maxlength="10"是需要的,checkNumber函數(shù)然後判斷是否input有存在中文,有的話判斷最後字符是否是英文。如果沒有中文說明說純英文就提示,這樣方案不足之處有中文和英文一起存在不好判斷。
下面這個(gè)例子,不知會(huì)不會(huì)幫你
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input 事件兼容處理以及中文輸入法優(yōu)化</title>
</head>
<body>
<input type='text'>
<script>
var input = document.querySelector('input');
var isLock = false;
//當(dāng)瀏覽器有非直接的文字輸入時(shí), compositionstart事件會(huì)以同步模式觸發(fā).
input.addEventListener('compositionstart', function(){
isLock = true;
})
//當(dāng)瀏覽器是直接的文字輸入時(shí), compositionend會(huì)以同步模式觸發(fā).
input.addEventListener('compositionend', function(){
isLock = false;
});
input.addEventListener('input',function(e){
if(!isLock)console.log(this.value);
});
</script>
</body>
</html>