您的位置:首頁技術文章
文章詳情頁

javascript - js輸入框限定字數問題

瀏覽:115日期:2023-04-10 14:59:09

問題描述

js輸入框限定輸入框的字數,以下代碼

<input type=’text’ onkeyup='checkNumber($(this))'>function checkNumber($this){ let val=$this.val(); if(val.length > 10 ){alert(’字數超過10’); }}

在實際過程中,發現以下問題,如圖:javascript - js輸入框限定字數問題

在輸入法中是,先顯示字母,再將字母拼音轉換成漢字。故可能在輸入的時候,字母加漢字已超過限定的字數,該如何解決?

問題解答

回答1:

<input type='text' maxlength='10'>回答2:

oninput='checkNumber($(this))'

回答3:

你不用alert,用輸入框后面加紅框的形式就可以了

回答4:

我們設想下,input也輸入全英文的、或者中文,需要限定長度小于10,那么maxlength='10'是需要的,checkNumber函數然后判斷是否input有存在中文,有的話判斷最后字符是否是英文。如果沒有中文說明說純英文就提示,這樣方案不足之處有中文和英文一起存在不好判斷。

回答5:

下面這個例子,不知會不會幫到你

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>input 事件兼容處理以及中文輸入法優化</title></head><body> <input type=’text’> <script>var input = document.querySelector(’input’);var isLock = false;//當瀏覽器有非直接的文字輸入時, compositionstart事件會以同步模式觸發.input.addEventListener(’compositionstart’, function(){ isLock = true;})//當瀏覽器是直接的文字輸入時, compositionend會以同步模式觸發.input.addEventListener(’compositionend’, function(){ isLock = false;});input.addEventListener(’input’,function(e){ if(!isLock)console.log(this.value);}); </script></body></html>回答6:

onkeyup事件換成onblur事件解決。

標簽: JavaScript
相關文章:
国产综合久久一区二区三区