本文介绍了如何使用JavaScript的onfocus和onblur事件在输入框聚焦时显示下拉列表，当焦点移开时隐藏列表，实现输入框的焦点效果。
在js中
1.onfocus 获取元素焦点
2. onblur 失去元素焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米光标事件</title>
<style>
ul {
display: none;
}
#inp{
width: 200px;
height: 50px;
outline: 0;
}
</style>
</head>
<body>
<input type="text" name="" id="inp">
<ul id="ul">
<li>全部商品</li>
<li>小米</li>
<li>红米</li>
<li>电脑</li>
<li>平板</li>
<li>笔记本</li>
</ul>
</body>
<script>
var inp=document.querySelector("#inp")
var il=document.querySelector('#ul')
inp.onfocus=function(){
inp.style.border="1px solid #ff6900 "
ul.style.display="block"
ul.style.color="#ff6900"
}
inp.onblur=function(){
ul.style.display="none"
}
</script>
</html>当你点击input时出现input和下方ul表格出现 焦点若不在这里面则消失
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
