首页
学习
活动
专区
工具
TVP
发布

DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。...它是HTML5里新增的一个非常有用的元素。 DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么。...HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单!...datalist自身并不显示,只在需要配合input输入时才会自动显示出来。 下面我们来看一个实际例子,在下面的输入框里,任意输入几个字母,datalist就会提示给你包含这几个字符的英文国家名称。...非常的简单,以前这样的效果基本上只能用讲Javascript实现,需要你有相当的javascript基本功,而现在,感谢HTML5,只需要纯HTML就能达到这样的神奇效果。

3.2K50
您找到你想要的搜索结果了吗?
是的
没有找到

html 输入输入事件,input输入框事件「建议收藏」

onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 -> onchange -> onblur 如下,奉上代码...value=’+event.target.value,’keyCode=’+event.keyCode) } 执行结果: 其实这个过程并没有很意外,唯一感觉不太对劲的是 onchange 事件并不是每次输入框值改变的时候触发的...之前触发; 2、说说这些事件 onfocus 并没有什么特别的,就是当焦点转移到(点击,tab切换) input 框上边的时候触发; onkeydown 键盘按下的时候触发,但是此时按下的值并没有被输入到...oninput 这个事件很贼,它的触发时机,从上面就可以看到,onpress 之后 onkeyup 之前; 此时,已经可以拿到 value,不能拿到keycode,不可以阻止默认事件了 ; 关键是这货明明是每次输入框的值变化时候出发的...失去焦点时候触发,但是还是比 onchange 慢了; 能获取新的到 value,不能拿到 keycode; 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140842.html

5.7K30

如何优雅做系统错误提示

因此,作为程序员群体的一份子,在这里我想呼吁大家认真对待错误提示,特别是那些不是给“人”看的错误提示…… 作为软件的创造者,我们虽然无法避免出现异常、出现bug,但是我们可以做到避免无意义的错误提示产生...首先,一些常见的容易让人摸不着头脑的错误提示要先避免。比如, 提交失败。 数据读取失败。 …… 这类错误提示看上去准确表达了当前遇到的问题,实际上啥也没说。...为了避免在信用卡卡号之类的文本框内输入数字以外的字符,做一下输入限制。 为了避免在弱网络下页面无法正常加载而提示错误,可以做缓存,提前预存一些数据在本地。 …… 好了,总结一下。...这篇呢Z哥和你分享了我对软件系统抛出的错误提示的看法。我认为好的错误提示需要符合以下4点。...作者:Zachary 出处:https://zacharyfan.com/archives/1250.html

1.8K10
领券