html下拉单选框

最新推荐文章于 2025-06-03 11:58:56 发布

KkaBum

最新推荐文章于 2025-06-03 11:58:56 发布

阅读量3.3k

点赞数 6

CC 4.0 BY-SA版权

文章标签： html5 javascript

本文链接：https://blog.csdn.net/KkaBum/article/details/124329732

本文介绍如何使用HTML、CSS和JavaScript在网页中创建一个响应式的输入框，当用户聚焦或输入内容时，显示动态下拉选项。通过监听input事件，实现输入内容匹配并选择列表项，用户选择后更新输入框内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            pading:0;

        }
        ul,li {
            list-style:none;
        }
        #ulDom {
            width: 100px;
            height: 100px;
            display: none;
        }
        #ulDom li {

        }

    </style>
</head>
<body>
<div>
    <input type="text" id="inputDom">
    <ul id="ulDom">
    </ul>
</div>
<script>
  let ulDom = document.getElementById('ulDom');
  let inputDom = document.getElementById('inputDom');
  let timer = null;
  inputDom.addEventListener('focus', function () {
    openSelect()
  })
  inputDom.addEventListener('input', function () {
    closeSelect();
    if(inputDom.value === ''){
     openSelect()
    }
  })

  ulDom.addEventListener('click', function (event) {
    console.log('0000')
    var e = event || window.event;
    var target = e.target || e.srcElement;
    console.log(target.innerHTML)
    inputDom.value = target.innerHTML;
    closeSelect()
  })
   inputDom.addEventListener('blur', function () {
    timer && clearTimeout(timer);
    timer = setTimeout(()=>{
      closeSelect();
    },300)

   })

  function openSelect() {
    ulDom.style.display = 'block';
  }

  function closeSelect() {
    ulDom.style.display = 'none';

  }

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  for (let i = 0; i < arr.length; i++) {
    const liDom = document.createElement('li')
    liDom.innerHTML= arr[i];
    ulDom.appendChild(liDom);
  }
</script>
</body>
</html>