<!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. [模板][P4238]多项式求逆

    NTT多项式求逆模板,详见代码 #include <map> #include <set> #include <stack> #include <cmath& ...

  2. Android AsyncTask将讲解

    原型:AsyncTask<Params, Progress, Result> Params 表示传入参数类型 Progress表示处理参数类型 Result表示返回类型 new Async ...

  3. C#扩展方法实现

    C#提供了一种机制,可以扩展系统或者第三方类库中的方法.比如说想在string类型的对象里面多一个ToInt32(),来方便的将字符转换成整形.在实现的过程中的关键字为static和this即可.   ...

  4. linux公社

    linux公社网址:http://www.linuxidc.com/ 资料下载地址:http://linux.linuxidc.com/

  5. HashMap实现原理（jdk1.7/jdk1.8）

    HashMap的底层实现: 1.简单回答 JDK1.7:HashMap的底层实现是:数组+链表  JDK1.8:HashMap的底层实现是:数组+链表/红黑树     为什么要红黑树?  红黑树:一个 ...

  6. Maven实战（八）——常用Maven插件介绍（下）

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  7. 用PowerShell激活anaconda的环境

    1.以管理员身份打开PowerShell 2. 执行conda install -n root -c pscondaenvs pscondaenvs 3. 执行 Set-ExecutionPolicy ...

  8. 用python实现ARP欺骗

    首先介绍一个python第三方库--Scapy,这个库不是标准库,默认是没有的,需要安装,不过在kali-linux里边是默认安装的, 这里我用kali做攻击者,xp做受害者 关于Scapy Scap ...

  9. 问题9：tabtle 整理

    合并“行”单元格: <th colspan="2">Telephone</th> 合并“列”单元格: <th rowspan="2" ...

  10. flask之基于DBUtils实现数据库连接池、本地线程、上下文

    本篇导航: 数据库连接池 本地线程 上下文管理 面向对象部分知识点解析 1.子类继承父类__init__的三种方式 class Dog(Animal): #子类 派生类 def __init__(se ...