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