当前第2页 返回上一页
2.HTML5<datalist>标签用在邮箱补全上：
html代码：
1 2 3 | <p>请输入您的邮箱：</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>
|
js代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value='"+ email +"@qq.com'>"+
"<option value='"+ email +"@126.com'>"+
"<option value='"+ email +"@foxmail.com'>"+
"<option value='"+ email +"@163.com'>"+
"<option value='"+ email +"@gmail.com'>")
}
}
|
input标签的oninput属性可以检测到input内容的变化，当输入框内容变化，出发js在datalist中追加option。如果用户手动输入了@，就不需要提示了。
HTML 4.01 与 HTML 5 之间的差异：
<datalist> 标签是 HTML 5 中的新标签。
浏览器支持：
所有主流浏览器都支持 <datalist> 标签，除了 Internet Explorer 和 Safari。
【相关推荐】
HTML5新增的结构元素有哪些？HTML5新增的结构元素的用法（推荐）
HTML5中的article标签是什么？HTML5中的article元素用在什么地方？
以上就是HTML5<datalist>标签有哪些属性？HTML5<datalist>标签的具体用法（附实例）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css什么是浮动
html5新增元素：语义化元素的介绍
typescript symbols
微信小程序api 微信支付
canvas像素点操作之视频绿幕抠图
css怎么设置元素层次
css怎么让盒子并排显示
vue.js一般用在什么地方
css3如何将图像设置为元素周围的边框
xhtml和html5的区别是什么
更多相关阅读请进入《JavaScript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5<datalist>标签有哪些属性？HTML5<datalist>标签的具体用法（附实例）
