社群 學習 工具庫 休閒
搜尋
繁体中文
javascript - js輸入框限定字數問題
高洛峰
高洛峰 2017-07-05 10:38:10
0
6
918

js輸入框限定輸入框的字數，以下程式碼

<input type='text' onkeyup="checkNumber($(this))">

function checkNumber($this){
    let val=$this.val();
    if(val.length > 10 ){
        alert('字数超过10');
    }
}

在實際過程中，發現以下問題，如圖：

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

全部回覆(6)
小葫芦
小葫芦2017-07-05 10:40:10 6樓

雷雷

點贊 +0
新增回覆
迷茫
迷茫2017-07-05 10:40:10 5樓

oninput="checkNumber($(this))"

點贊 +0
新增回覆
代言
代言2017-07-05 10:40:10 4樓

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

點贊 +0
新增回覆
给我你的怀抱
给我你的怀抱2017-07-05 10:40:10 3樓

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

點贊 +0
新增回覆
ringa_lee
ringa_lee2017-07-05 10:40:10 2樓

下面這個例子，不知會不會幫你

<!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>
點贊 +0
新增回覆
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-05 10:40:10 1樓

onkeyup事件換成onblur事件解決。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板