代码如下:

 //智能搜索提示
IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', function () {
if ($(this).prop('comStart')) return; // 中文输入过程中不截断
var url = $('#hKeyWord').val();
var data = { keyword: $('#keyWord').val() };
$('#words').html('');
imcis.ajax(url, data, false, function (data) {
var option = "";
$.each(data, function (key, value) {
option += '<option value=' + value + '>';
});
$('#words').html(option);
//alert('H');
});
}).on('compositionstart', function () {
$(this).prop('comStart', true);
}).on('compositionend', function () {
$(this).prop('comStart', false);
});
}

HTML以及加载方法:

<input list="words" autocomplete="off" id="keyWord" style="font-size:12px;" type="text" placeholder="请输入关键字" />
<datalist id="words" style="background:red"> @*<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">*@
</datalist>

采用H5的datalist去提示

 $(function () {
MedicalCase.IntelligenceSearch();
});

前台加载一下

具体的原理如下:

      $(function () {
$('#text').on('input', function () {
if ($(this).prop('comStart')) return; // 中文输入过程中不截断 var value = $(this).val();
console.log('当前输入:' + value);
//if (Str.byteLen(value, 3) > 24) {
// $(this).val(Str.getMaxlen(value, 24));
//}
}).on('compositionstart', function () {
$(this).prop('comStart', true);
console.log('中文输入:开始');
}).on('compositionend', function () {
$(this).prop('comStart', false);
console.log('中文输入:结束');
});
})

开始和结束代表着事件的开始捕捉和结束捕捉

,这个做的更好一些能在后台加入缓存处理吗。还请大神指教

此外,中文输入法的keydown按出的keycode一直都会是229,在此科普一下

JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法的更多相关文章

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

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

  2. 实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

  3. 速成KeePass全局自动填表登录QQ与迅雷(包括中文输入法状态时用中文用户名一键登录)

    原文:http://bbs.kafan.cn/thread-1637531-1-1.html 使用目的:1 网页和本地客户端登录一站式解决2 通过KeePss修改密码和登录更方便,可以复制粘贴,省了输 ...

  4. PL/SQL Developer 使用中文条件查询时无数据的解决方法(转)

    原文地址: PL/SQL Developer 使用中文条件查询时无数据的解决方法 PL/SQL Developer 使用中文条件查询时无数据,这是由于字符集的不一致导致的. 执行以下sql命令:sel ...

  5. iOS:UITextField中文输入法输入时对字符长度的限制

      如题的问题,又是个让我抓狂了大半天的问题,还是做个记录,有与类似问题的同学可参考,但不一定对.具体问题还需具体分析.我遇到的需求是这样的:有一个输入框,输入框内输入文字,文字字数限制在20字.   ...

  6. PL/SQL Developer 使用中文条件查询时无数据的解决方法

    PL/SQL Developer 使用中文条件查询时无数据,这是由于字符集的不一致导致的. 执行以下sql命令:select userenv('language') from dual; 显示:SIM ...

  7. UITextField中文输入法输入时对字符长度的限制 输入时对字符类型的限制

    检索一个字符串的长度的话:直接用 length,去进行判断就行了, 如果要检索字符串是否是自己要限制的类型的话,可以用正则表达式: 举个例子:   匹配9-15个由字母/数字组成的字符串的正则表达式: ...

  8. wpf textbox只能输入数字,屏蔽中文输入

    1.设置textbox属性InputMethod.IsInputMethodEnabled="False" 2.增加KeyDown事件 private void TextBox_K ...

  9. idea无法使用中文输入法输入

    问题--idea无法使用中文输入 原因:idea本身版本过高,所以需要你强制减低它的jdk版本 解决:使用配置idea环境变量解决 ps:目前适用于任何版本的jdk和idea 步骤: 1.新建一个ID ...

随机推荐

  1. matlab白底换红底

    白底换红底 局部阈值调整 边界高斯滤波 function demo global R global threshold global img global dstColor global rect g ...

  2. eclispe的使用

    1.eclipse 有的时候,子类包都已经写了,这时候要添加一个父类包,如果在包结构下是添加不了的,这时候需要切换格式:    

  3. HDU - 1232 畅通工程-并查集模板

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可). ...

  4. 使用vs2019进行Linux远程开发

    通常,当我们开发Linux程序时有两种方案: 在Linux上直接编写程序并进行运行测试和调试 在Windows或Mac OS X上借助工具进行远程开发 虽然我自己是在Linux环境上直接进行开发的,但 ...

  5. QRegExp解析

    正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 'b' ...

  6. 阻塞调用ShellExecute函数

    SHELLEXECUTEINFO si;ZeroMemory(&si, sizeof(si));si.cbSize = sizeof(si);si.fMask = SEE_MASK_NOCLO ...

  7. BAT或赌在当下或押在未来,谁是王者?

    转自:http://www.tmtpost.com/97132.html 百度阿里和腾讯三家本来的核心业务并不冲突,各守一方阵地,但随着各自的收购注资加上业务的延展而慢慢有了交际,阿里和腾讯在移动支付 ...

  8. 計蒜課/排澇(Edmond-Karp)

    題目鏈接: https://nanti.jisuanke.com/t/36 題意:中文題目誒~ 思路: 最大流模板題.... 關於最大流算法blog: http://www.cnblogs.com/z ...

  9. uoj#79. 一般图最大匹配(带花树)

    传送门 带花树 不加证明的说一下过程好了:每次从一个未匹配点\(S\)出发bfs,设\(S\)为\(1\)类点,如果当前点\(v\)在本次bfs中未经过,分为以下两种情况 1.\(v\)是未匹配点,那 ...

  10. [Xcode 实际操作]二、视图与手势-(9)CGAffineTransform仿射变换的使用

    目录:[Swift]Xcode实际操作 本文将演示使用视图对象的仿射变换功能,旋转视图对象. import UIKit class ViewController: UIViewController { ...