<!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"></span> /

    </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 >  && titleInput.val(text.substring(, ));

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

js中文输入法字符串截断的更多相关文章

  1. 解决js中文输入法无法触发onkeyup事件问题(转)

    当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. onin ...

  2. JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

    代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...

  3. js如何判断当前文本的输入状态——中文输入法的那些坑

    相信各位在平时接需求的时候肯定会遇到这样的一些需求,例如,要求输入框限制输入长度,限制输入类型,限制只能英文输入,限制只能输入大写字母等等,这时候我们一般的思路无非两种,一种是弹出特定的键盘,第二种是 ...

  4. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  5. JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    原文:http://www.cnblogs.com/liuxianan/p/pinyinjs.html 前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多 ...

  6. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  7. JavaScript 汉字与拼音互转终极方案 附JS拼音输入法

    转:http://www.codeceo.com/article/javascript-pinyin.html 前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的 ...

  8. JS.中文乱码，Jsp\Servlet端的解决办法

    JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21|  分类: Extjs |  标签:encodeuricomponent  乱码  urldecoder   ...

  9. 类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug

    解决方法:

随机推荐

  1. 查看mysql数据库体积

    查看MySQL数据库大小 1.首先进入information_schema 数据库(存放了其他的数据库的信息) ? 1 2 mysql> use information_schema; Data ...

  2. async与await线程分配研究

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. h5中input的request属性提示文字字段

    <input type="password" class="form-control" name="passWord" require ...

  4. 对学习Ajax的知识总结

    1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互, ...

  5. ES6_入门（3）_顶层对象属性

    //顶层对象属性:在ES5中,顶层对象的属性与全局变量是等价的.以下代码中,为顶层对象的属性赋值与全局变量的赋值,是同一件事. window.a=10; console.log(window.a); ...

  6. ISAPI多进程设置

    ISAPI多进程设置 IIS默认配置下采用的是单工作进程的工作模式,也就是只启用一个w3wp.exe进程处理所有请求,然后进程内启用多个线程来处理并发请求,最大工作线程数由具体的操作系统和IIS来决定 ...

  7. Spark2.3（四十二）：Spark Streaming和Spark Structured Streaming更新broadcast总结（二）

    本次此时是在SPARK2,3 structured streaming下测试,不过这种方案,在spark2.2 structured streaming下应该也可行(请自行测试).以下是我测试结果: ...

  8. 手把手教你制作微信小程序，开源、免费、快速搞定

    最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...

  9. wpf 控件添加背景图片

    方法一,xaml中: <控件> <控件.Background> <ImageBrush ImageSource="/WpfApplication1;compon ...

  10. [Python设计模式] 第28章 男人和女人——访问者模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下不同情况: 男人成功时,背后多半有一个伟大的女人: 女人成功 ...