js中文输入法字符串截断

不念不忘少年蓝@ 2022-03-30 09:39 177阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>js中文输入法字符串截断</title>
    </head>
    
    <body>
    
        <p>
            <input type="text" class="title-input">
            <span class="title-length">0</span> / 10
        </p>
    
    
    
    
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            $(function () {
                var titleInput = $(".title-input"),
                    titleLength = $(".title-length");
                titleInput.on("keyup", function () {
                    var text = $.trim(titleInput.val());
                    titleInput.val(text);
                    titleLength.html(text.length);
                }).on("input propertychange", function () {
                    var text = $.trim(titleInput.val());
                    text.length > 10 && titleInput.val(text.substring(0, 10));
                }).on("compositionstart", function () {
                    $(this).prop("comStart", true);
                    console.log("中文输入start");
                }).on("compositionend", function () {
                    $(this).prop("comStart", false);
                    console.log("中文输入end");
                });
            });
        </script>
    </body>
    
    </html>

1、事件input(ie9+)、 propertychange(ie8-) 用来监听用户的输入；  
字母、数字是没问题的，但是中文输入法时候不同浏览器表现不同，有的浏览器会在输入拼音时就会进入判断；

2、复合事件[composition event][](ie9+),用于处理IME的输入序列：  
（1）compositionstart：在IME的文本复合系统打开时触发，表示要开始输入了。  
（2）compositionupdate：在向输入字段中插入新字符时触发。  
（3）compositionend：在IME的文本复合系统关闭时触发，表示返回正常键盘的输入状态。

[composition event]: https://developer.mozilla.org/zh-CN/docs/Web/API/CompositionEvent