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篇 在文本框搜索时,自动匹配搜索的内容,并以列表的形式显示在文本输入框的下方,选中一项后当 ...
最新文章
- Android自定义Seekbar拖动条式样
- 中国互联网的抑郁:抄与被抄都很痛
- 【线性变换/矩阵及乘法】- 图解线性代数 03
- 引入 JPEGCodec;JPEGImageEncoder; 图片处理(有的时候会报错)
- const 和 #define 区别总结
- JS之onsubmit事件与组织事件外延
- 玩转linux——Screen管理远程会话,再也不怕关闭SSH就中断会话了
- iQOO Neo5入网:搭载双电芯方案 标配66W快充
- Community宣言
- 电导池行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- xilinx sdk查看结构体定义open declaration
- Linux笔记1 修改主机名、ip以及指DNS
- Excel排序、筛选
- 寻找春天amp;nbsp;九宫格日记-2014.04.26
- 疫情又又又来了,看我爬取京东6000款口罩,来看看那一款最适合你
- 使用Win64OpenSSL_Light生成自签名https授权证书的几个坑
- 深度学习与TensorFlow实战(十)卷积神经网络—VGG(16)神经网络
- Ghost的一些使用方法
- IDEA插件 阿里巴Java编码指南插件支持
- 用python比较大小_用python比较大小
热门文章
- 学习后台第二周(ง •_•)ง
- ps中给图片加文字不显示解决办法
- 【报告分享】 2020中国女性梦幻职业白皮书-COSMO数字100 (附下载)
- python爬取微博评论_详解用python写网络爬虫-爬取新浪微博评论
- oracle11g broker,张欣橙Oracle11g配置DGbroker
- JS HTML Web端使用MQTT通讯测试
- AI智能工具集(含AI语音合成、视频补帧、视频放大、目标检测、图片风格化等)
- 怎么批量查询银行卡号是哪个银行?
- 网络流量监控iptraf
- Android 集成百度地图服务和驾车导航jar包冲突、驾车导航引入armeabi-v7a平台