<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>问卷</title>
<body>
<form>
<label for="email">邮 箱：</label><input type="email" id="email" list="input_list" name="email" placeholder="您的邮箱"
required />
<datalist id="input_list"></datalist>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
//邮箱自动补全
const inputemail = document.getElementById('email');
function inputList(input, list) {
var mailBox = [
"@qq.com",
"@163.com",
"@outlook.com",
"@126.com",
"@gmail.com",
"@sohu.com"
];
inputemail.addEventListener('input', function () {
var key = inputemail.value;
if (key.indexOf("@") != -1) {
key = key.slice(0, key.indexOf("@"));
}
var mailBoxLen = mailBox.length;
var html = "";
for (var i = 0; i < mailBoxLen; i++) {
html += '<option value="' + key + mailBox[i] + '"></option>';
}
list.html(html);//在html中创建一个列表
});
}
inputList($("input"), $("#input_list"));
</script>
5034
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
