JavaScript案例——实现下拉菜单

最新推荐文章于 2022-06-01 23:09:43 发布

君绾

最新推荐文章于 2022-06-01 23:09:43 发布

阅读量1k

点赞数

分类专栏： my js 文章标签： JavaScript

本文链接：https://blog.csdn.net/wing_annuan/article/details/103265928

版权

这篇博客介绍了一个JavaScript案例，通过键盘上下键选择和回车键确认，实现了一个功能完善的下拉菜单。当输入框获取焦点时显示菜单，失去焦点时则隐藏，为用户提供便捷的操作体验。

摘要由CSDN通过智能技术生成

可以利用键盘上下键进行选取，回车键进行选中
思路：
1、获取网页元素
2、输入框获取焦点时显示下拉菜单
3、输入框失去焦点时隐藏下拉菜单
4、键盘上下方向键选择下拉菜单
5、回车键把当前选中菜单文字写入输入框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      ul {
   
        list-style: none;
        padding: 0;
        margin: 0;
      }

      body {
   
        background: #23384e;
        font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
      }

      .search,
      .search .inner-box,
      .search .box,
      .search .select,
      .search a {
   
        background: url(../images/search.jpg) no-repeat;
      }

      .search,
      .search .box,
      .search .inner-box {
   
        height: 34px;
      }

      .search {
   
        position: relative;
        width: 350px;
        margin: 10px auto;
      }

      .search .box {
   
        background-position:

最低0.47元/天解锁文章

君绾

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例——实现下拉菜单

可以利用键盘上下键进行选取，回车键进行选中思路：1、获取网页元素2、输入框获取焦点时显示下拉菜单3、输入框失去焦点时隐藏下拉菜单4、键盘上下方向键选择下拉菜单5、回车键把当前选中菜单文字写入输入框<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />...
复制链接

扫一扫

专栏目录