<!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. Seaborn入门

    Seaborn入门 Seaborn是基于matplotlib的python数据可视化库,提供更高层次的API封装,使用起来更加方便快捷. displot displot()集成了hist直方图和kde ...

  2. 穷举法、for循环、函数、作用域、斐波那契数

    1.穷举法 枚举所有可能性,直到得到正确的答案或者尝试完所有值. 穷举法经常是解决问题的最实用的方法,它实现起来热别容易,并且易于理解. 2.for循环 for语句一般形式如下: for variab ...

  3. 安装pytorch0.4.0

    参考了官网https://pytorch.org/previous-versions/中的说明 (jj1env) [ji@dev down_python0.4.0]$ pip install http ...

  4. 3_主流部署方式介绍-Django+gunicorn+nginx

    下载python wgethttps://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz 报错 Cannot find a valid baseurl ...

  5. python之进程和线程3

    1 multiprocessing模块 (1.)直接导入 from multiprocessing import Process import os import time def info(name ...

  6. Linux之nfs服务

    1.二进制安装nfs 2.作为共享存储挂载在三台web的网站根目录下实现,在任意一台web上修改的结果,其余两台都可以看到 [root@localhost ~]# yum install rpcbin ...

  7. shell之磁盘容量检查，配合crontab可以定时清理磁盘

    我的做法: !/bin/bashAvailable=`df -k | sed -n 2p | awk '{print $4}'`if [ $Available -eq 0 ];then        ...

  8. Delphi 之弹出气泡消息提示

    //h:窗体中控件的句柄(用在某个控件上提示消息)(要调用的控件句柄) //text:要提示的文本 //cap:提示框上的标题 //IconType:提示框上显示的图标(共三个值.1.2.3分别为提示 ...

  9. delphi button 实现下拉列表

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  10. Ubuntu远程连接MySQL(connection refused)解决方法

    一.判断ubuntu是否开启防火墙 sudo ufw status 开放防火墙3306端口 sudo ufw allow 3306 二.查看3306端口是否打开  注意:红色框框表示3306绑定的ip ...