js中文輸入法字符串截斷

時間 2019-11-06

原文原文鏈接

<!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>

一、事件input(ie9+)、 propertychange(ie8-) 用來監聽用戶的輸入；
字母、數字是沒問題的，可是中文輸入法時候不一樣瀏覽器表現不一樣，有的瀏覽器會在輸入拼音時就會進入判斷； html

二、複合事件composition event(ie9+),用於處理IME的輸入序列：
（1）compositionstart：在IME的文本複合系統打開時觸發，表示要開始輸入了。
（2）compositionupdate：在向輸入字段中插入新字符時觸發。
（3）compositionend：在IME的文本複合系統關閉時觸發，表示返回正常鍵盤的輸入狀態。jquery