文本框模拟下拉菜单

最新推荐文章于 2022-08-22 08:47:13 发布

HAI6545

最新推荐文章于 2022-08-22 08:47:13 发布

阅读量195

点赞数 1

分类专栏： JavaScript案例文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122198707

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
input{
    padding-left:8px;
}
li{
    list-style-type: none;
}
</style>
<body>
<input type="text" name="keywords">
<ul></ul>
</body>
<script>
// 定义列表项中的数据 - 数组
var arr = ['VueJs', 'React', 'Angular'];
// 给文本框绑定获取焦点事件
var input = document.querySelector('[name="keywords"]');
// 获取ul
var ul = document.querySelector('ul');
input.addEventListener('focus', focus)
function focus(){
    // 需要创建几个li放在ul中
    arr.forEach(function(v){
        var li = document.createElement('li')
        ul.appendChild(li)
        li.innerText = v
        // 给所有的li绑定单击事件
        li.onclick = function(){
            // 获取当前点击的li的内容
            // console.log( this.innerText );
            input.value = this.innerText
        }
    })
    
    // 获取所有的li
    // var lis = document.querySelectorAll('li');
    // console.log(lis)
}
// 失去焦点事件
input.onblur = function(){
    // 延迟一会清空ul内容
    setTimeout(function(){
        ul.innerHTML = ''
    }, 200)
}

</script>
</html>