html 文本框自动补全,自动补全(input处理)
自动补全,可能很多人都说三方的插件那么多,随便找个来用,改改就行,而实际上,有时候三方的自动补全插件很难满足你所面临的业务场景,这时候就需要你自己动手写了。其实思路不复杂,但是都会面临一些困难。兼容性,请求后台数据的次数等等。我搜集了相关资料,做了一些整理。
相关方法keyup、input、compositionstart 、compositionend
下面是相关方法的大致介绍:
keyup
官方:按键释放时触发。意味着:只要是键盘上相关操作都能被捕获。
缺点:不支持鼠标复制粘贴的内容,因为这不属于按键操作。
input
官方:当value 被修改时,会触发 input 事件。它关注的是value变化,不关心你通过什么方式让它变化的。所以,它支持鼠标复制粘贴的内容。
缺点:1. 支持IE9及以上的版本;2. input和compositionend的执行顺序,各大浏览器厂商不一样。
compositionstart
官方:
事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
也就是:输入一段中文,按下第一个字母的时候触发。
compositionend
官方:当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。
也就是:输入一段中文,完成的时候触发。
旧实现方式
在此之前,我基本都是用的keyup或input来做自动补全处理。需要兼容IE8就用的keyup,不需要的时候用的input。还大致用了一个判断IE版本,把两个方法糅合在一起使用。但是这两个方法都有个缺点,那就是输入中文时,会触发多次。因为中文输入时多字母录入,键盘上是属于多键触发。这就导致请求后台数据太频繁,虽然有了一个折中的方式,那就是延迟发送请求。但是这终究是治标不治本,体验也没那么好。
核心代码:
var t;
//搜索框--按键松开释放
$(".auto-input").on("keyup", function(e) {
autoLoadShowPnl($(this));
});
//自动补全--加载显示列表
function autoLoadShowPnl(obj){
var curVal = (obj.val()||'').trim();//输入值
if(!curVal){
return !1;
}
t && clearTimeout(t);
t = setTimeout(function () {
console.log(curVal);
//todo 请求后台拿到数据
},500);
}
新实现方式
旧的实现方式,始终有个痛点没解决:发送请求的次数。然后发现了compositionstart和compositionend方法。这些就能解决之前的痛点了。下面先直接上代码,后面再解释为何这样做。
自动补全
*{
margin: 0;
padding: 0;
}
.clear:after{
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
body{
padding: 10px;
}
自动补全
日志:
$(function() {
$('#input').on({
keyup : function(e){
$('.log').append(' keyup');
var flag = e.target.isNeedPrevent;
if(flag) return;
response() ;
e.target.keyEvent = false ;
},
keydown : function(e){
$('.log').append(' keydown');
e.target.keyEvent = true ;
},
input : function(e){
$('.log').append(' input');
if(!e.target.keyEvent){
response()
}
},
compositionstart : function(e){
$('.log').append(' compositionstart');
e.target.isNeedPrevent = true ;
},
compositionend : function(e){
$('.log').append(' compositionend');
e.target.isNeedPrevent = false;
}
});
function response(){
$('#input_con').append('
keyup 事件触发
')
}
});
从之前的方法介绍里面就能看出来:
keyup不支持鼠标粘贴的内容,input支持,所以,可以在input里发送请求。
如图:
1.png
input和compositionend在各个浏览器里的顺序不一样,所以在compositionend后做input处理。但是,compositionend之后一定会有keyup触发。所以,可以在keyup里发送请求。
如图:
2.png
参考
html 文本框自动补全,自动补全(input处理)相关推荐
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- adobe cs5 indesign 不显示文本框_Adobe CS5 InDesign自动添加页码
报名美工组,安装Adobe CS5,自学Indesign,参考网络教程,几经波折终于把添加自动页码搞定.以下是一点经验之谈,希望对大家有点帮助. ①先在如图一所示位置双击选择主页. 图一 ②在要加页码 ...
- html 文本框赋值日期代码,如何获取到input输入框 中date的当前日期
如何获取到input输入框 中date的当前日期 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年6月8日 首先input是表单中的一种元素,所以接下来先给 ...
- 自动填写html文本框的值,网页自动填表——文本输入框及多行文本输入框
原标题:网页自动填表--文本输入框及多行文本输入框 下面来说说网页需要填表的情况,比如注册页面呀,论坛页面呀等等.需要填写每项内容,如何实现文本输入框和多行文本输入框的自动填写呢.我们请出网页自动操作 ...
- 利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
假设有这样一个需求:我们需要增强 HTML 里原生的 input 标签,让其达到,随着用户输入字符时,其颜色自动切换的效果. 这是一个典型的可以使用 Angular Directive 实现的需求. ...
- html email输入框,html5给文本框实现email域名自动完成效果
产品反馈用户总是输错email的域名,因此服务器得到的email的地址是错误的.比如,有许多用户总将xxx@qq.com输入成xxx@qq.con. 这让后端很烦恼,因为这个email地址是合法的,但 ...
- html中文输入转换成英文,HTML input 文本框输入中文逗号自动转换为英文逗号
begin 经历了一段时间的使用Github发表个人博客,我的感受就是很装逼,但是很麻烦--,因为都是自己手动弄的,还不如博客园方便,还有自己买了域名,但是SEO却提不上起,或者说压根就没有 --#, ...
- java 文本框只读_处理表单使input等文本框为只读不可编辑的方法
方法1: οnfοcus=this.blur() 方法2:readonly 方法3: disabled Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着 ...
- html文本框禁用css,html/css怎么让input禁止输入
禁止input输入的方法:1.input中添加"readonly="readonly""语句:2.input中添加"disabled="di ...
- vc 文本框 只显示下划线_【Axure9百例】36.文本框搜索自动匹配
" 根据输入的内容自动显示匹配内容列表." 这是<Axure9百例>系列第36篇 在文本框搜索时,自动匹配搜索的内容,并以列表的形式显示在文本输入框的下方,选中一项后当 ...
最新文章
- Oracle SQL Loader的详细语法
- ab 发送post请求测试API性能
- 如何在网页中嵌入自己想要的字体(实例下载)
- 白话Elasticsearch43-深入聚合数据分析之案例实战__排序:按每种颜色的平均销售额升序排序
- 竞品分析方法论:7个视角,50+维度
- 使用C语言将一个数组首尾互换后输出,函数实现体会地址传递
- 从Windows计算机上完全删除iTunes和其他Apple软件
- 马踏棋盘算法(骑士周游)
- 哈希值 哈希表_哈希杰森
- Onvif开发之代码框架生成篇
- 【NLP】毕业设计学习笔记(三):bert_bi-lstm代码解读
- plt导致的_tkinter.TclError: no display name and no $DISPLAY environment variable的问题
- 4.你认为一些军事方面的软件系统采用什么样的开发模型比较合适?
- python爬虫cookie池搭建_爬虫——cookies池的搭建
- GEE实现夜光遥感数据分析
- 七周成为数据分析师 第一周:数据分析思维
- web前端期末大作业:我的家乡广东(html+css布局)div制作
- keytool命令整理
- 高精度结构光工业3D相机Mech-Eye PRO全面升级:可选蓝光/白光版本,适合中距离应用...
- 自己写操作系统学习总结