文本框_前端开发js和CSS_输入邮箱自动联想+补全

js 前端模板开发教程|邮箱补全|网站前端开发

html 代码

<!DOCTYPE html>
<head>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<metahttp-equiv=”content-type” content=”text/html;charset=utf-8″>
<title>web前端开发免费教程</title>
</head>
<body>
<inputtype=”text” list=”input_list” name=”text” placeholder=”请输入邮箱” />
<datalistid=”input_list”></datalist>
</body>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
<script type=”text/javascript”>
functioninputList(input,list){
varmailBox= [
“@qq.com”,
“@sina.com”,
“@163.com”,
“@126.com”,
“@yahoo.com.cn”,
“@gmail.com”,
“@sohu.com”
];
input.bind(‘input propertychange’,function(){
varkey=input.val();
if (key.indexOf(“@”) !=-1) {
key=key.slice(0,key.indexOf(“@”));
}
varmailBoxLen=mailBox.length;
varhtml=””;
for (vari=0;i<mailBoxLen;i++) {
html+='<option value=”‘+key+mailBox[i] +'”></option>’;
}
list.html(html);
});
}
inputList($(“input”),$(“#input_list”));
</script>
</html>
移动web前端开发技术|前端与移动开发培训|最新前端开发框架搭建
» 本文来自:前端开发者 » 《文本框_前端开发js和CSS_输入邮箱自动联想+补全》
» 本文链接地址:https://www.rokub.com/3682.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!