js中文输入法字符串截断

 

 

 

<!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的文本复合系统关闭时触发，表示返回正常键盘的输入状态。

 

posted @ 2017-02-27 11:28  赵小磊  阅读(613)  评论(0)  编辑  收藏  举报
回到头部