<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .mi { position: relative; width: 223px; margin: 100px auto; } .mi input { width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; } .mi .search { border: 1px solid #ff6700; } .result-list { display: none; position: absolute; left: 0; top: 48px; width: 223px; border: 1px solid #ff6700; border-top: 0; background: #fff; } .result-list a { display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover { background-color: #eee; } </style> </head> <body> <div class="mi"> <input type="search" placeholder="小米笔记本" /> <ul class="result-list"> <li><a href="#">全部商品</a></li> <li><a href="#">小米11</a></li> <li><a href="#">小米10S</a></li> <li><a href="#">小米笔记本</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">黑鲨4</a></li> <li><a href="#">空调</a></li> </ul> </div> <script> // 获取元素 const input = document.querySelector("[type=search]"); const ul = document.querySelector(".result-list"); // 监听事件 获取焦点 input.addEventListener("focus", function () { ul.style.display = "block"; // 添加一个带有颜色边框的类名 input.classList.add("search"); }); // 监听事件 失去焦点 input.addEventListener("blur", function () { ul.style.display = "none"; // 移除 input.classList.remove("search"); }); </script> </body> </html> 鼠标点击下拉框里面的内容时,上面的搜索框出现鼠标点击的内容
时间: 2023-08-14 14:04:46 浏览: 1199
您可以使用JavaScript来实现当鼠标点击下拉框中的内容时,将其显示在搜索框中。您可以尝试以下代码:
```javascript
// 获取元素
const input = document.querySelector("[type=search]");
const ul = document.querySelector(".result-list");
// 监听事件 鼠标点击
ul.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
input.value = e.target.textContent;
}
});
```
将此代码添加到您的HTML文件的`<script>`标签中即可。这样,当用户点击下拉框中的内容时,搜索框中将显示所点击的内容。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index.html</title> <link type="text/css" rel="stylesheet" href="../css/denglu.css"> </head> <body> <div> <!--头部--> <img id="hi1" src="../images/R-C.jpg"> </div> <div class="dh"> <!--导航栏 --> <ul> <li><a href="首页.html">首页</a></li> <li><a href="家乡简介.html">家乡简介</a></li> <li><a href="风景名胜.html">风景名胜</a></li> <li><a href="美食特色.html">美食特色</a></li> <li><a href="登陆注册.html">登陆注册</a></li> </ul> </div> <div class="container"> <div class="form"> <h2>登录</h2> <form> <div class="inputBox"> <input type="text" placeholder="姓名"> </div> <div class="inputBox"> <input type="password" placeholder="密码"> </div> <div class="inputBox"> <input type="submit" value="登录"> </div> <p class="forget">忘记密码?<a href="#"> 点击这里 </a></p> <p class="forget">没有账户?<a href="#"> 注册 </a></p> </form> </div> </div> <div id="" class="footer"> <p> 安庆欢迎您 </p> </div> </body> </html>
这是一段 HTML 代码。HTML 是用来构建网页的一种标记语言。这段代码定义了一个网页的布局、内容和样式。
在这段代码中,有一个 "head" 元素和一个 "body" 元素。"head" 元素中包含网页的一些元信息,比如标题、字符编码方式等,而 "body" 元素中则是网页的实际内容,比如文本、图片、表单等。
这段代码中,还定义了几个 div 元素,div 元素是一种通用的布局元素,可以用来将内容分成不同的部分。这里的 div 元素分别是头部、导航栏和内容区域。
这段代码中还使用了一些其他的标签,比如 a、img 和 form 等,这些标签可以用来定义超链接、图片和表单等内容。
把一下代码生成流程图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>register</title> <link rel="stylesheet" href="css/register.css"> <script src="js/zone.js"></script> </head> <body> <table align="center" cellpadding="5px"> <tr> <td> </td> <td align="left">注册</td> </tr> <tr> <td align="right">用户名:</td> <td> <input type="text" id="username" autocomplete="off" placeholder="输入姓名"> </td> </tr> <tr> <td align="right">密码</td> <td> <input type="password" id="password" placeholder="输入密码"> </td> </tr> <tr> <td align="right">确认密码</td> <td> <input type="password" id="repwd" placeholder="确认密码"> </td> </tr> <tr> <td> </td> <td> <input type="button" value="注册" id="register" onclick="reg()"> <a href="login.html">登录</a> </td> </tr> </table> </body> </html>
很好,我会为您生成代码的流程图。首先,整个代码的流程图可以分为两个大的模块:HTML和JavaScript。以下是HTML模块的流程图:
```
start -> HTML
HTML -> head
head -> meta charset
head -> meta http-equiv
head -> meta name
head -> title
head -> link
head -> script
HTML -> body
body -> table
table -> tr
tr -> td
td -> text "注册"
td --> td
td -> input type="text" id="username" autocomplete="off" placeholder="输入姓名"
tr --> table
table -> tr
tr -> td
td -> text "用户名:"
td --> td
td -> input type="password" id="password" placeholder="输入密码"
tr --> table
table -> tr
tr -> td
td -> text "确认密码"
td --> td
td -> input type="password" id="repwd" placeholder="确认密码"
tr --> table
table -> tr
tr -> td
td -> input type="button" value="注册" id="register" onclick="reg()"
td --> td
td -> a href="login.html"
tr --> table
table --> body
body --> HTML
HTML --> end
```
然后是JavaScript模块的流程图:
```
start -> JavaScript
JavaScript -> input type="button" id="register" onclick="reg()"
input type="button" id="register" onclick="reg()" -> function reg()
function reg() -> var username = document.getElementById("username").value
function reg() -> var password = document.getElementById("password").value
function reg() -> var repwd = document.getElementById("repwd").value
function reg() -> if (username == "" || password == "" || repwd == "")
if (username == "" || password == "" || repwd == "") -> alert("请填写完整信息!")
function reg() --> if
if (username == "" || password == "" || repwd == "") --> end
function reg() -> if (password != repwd)
if (password != repwd) -> alert("两次密码输入不一致!")
function reg() --> if
if (password != repwd) --> end
function reg() -> else
else -> alert("注册成功!")
function reg() --> else
else --> end
JavaScript --> end
```
希望我的回答可以帮助到您!
阅读全文