点击可弹出下拉选单的text输入框实现需求问询

嘿，我刚好做过类似的需求，给你整理了一套完整的实现方案，完全满足你要的「点击输入框弹出下拉选项、支持手动输入、点击选项填充内容、再次点击重新弹出」的要求，直接抄就能用，还能根据自己的需求改样式和选项👇

1. HTML 结构 #

我们需要在原输入框旁边加一个下拉菜单容器，用来放可选的选项：

<div class="input-with-dropdown">
  <input type="text" name="email" id="email" value="" placeholder="输入邮箱或选择选项" class="txt">
  <!-- 下拉菜单容器 -->
  <div class="dropdown-menu" id="emailDropdown">
    <div class="dropdown-item">user@gmail.com</div>
    <div class="dropdown-item">user@yahoo.com</div>
    <div class="dropdown-item">user@outlook.com</div>
    <div class="dropdown-item">user@company.com</div>
  </div>
</div>

2. CSS 样式 #

让下拉菜单默认隐藏，点击输入框时显示，并且做一些基础样式优化，让它看起来像个正经的下拉选单：

/* 父容器用来做定位参考 */
.input-with-dropdown {
  position: relative;
  display: inline-block;
}

/* 原输入框的基础样式（可以根据你的项目调整） */
.txt {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
  font-size: 14px;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none; /* 默认隐藏 */
  max-height: 200px;
  overflow-y: auto;
}

/* 下拉选项样式 */
.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

/* 显示下拉菜单的类 */
.dropdown-menu.show {
  display: block;
}

3. JavaScript 逻辑 #

实现核心交互：点击输入框切换菜单显示/隐藏，点击选项填充内容，点击外部区域关闭菜单：

const emailInput = document.getElementById('email');
const dropdownMenu = document.getElementById('emailDropdown');
const dropdownItems = dropdownMenu.querySelectorAll('.dropdown-item');

// 点击输入框切换下拉菜单显示状态
emailInput.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡，避免触发外部点击关闭
  dropdownMenu.classList.toggle('show');
});

// 点击下拉选项，填充内容到输入框并关闭菜单
dropdownItems.forEach(item => {
  item.addEventListener('click', () => {
    emailInput.value = item.textContent;
    dropdownMenu.classList.remove('show');
  });
});

// 点击页面其他区域，关闭下拉菜单
document.addEventListener('click', () => {
  dropdownMenu.classList.remove('show');
});

• 点击输入框时，下拉菜单会切换显示/隐藏，再次点击会重新弹出
• 输入框始终支持手动输入内容，不会被下拉菜单限制
• 点击任意下拉选项，选项内容会直接填入输入框，同时菜单自动关闭
• 点击页面其他空白区域，下拉菜单会自动关闭，提升交互体验

你可以根据自己的需求修改：

• 下拉菜单里的选项内容（比如换成你需要的邮箱后缀或者其他选项）
• CSS样式（比如颜色、大小、阴影效果）
• 输入框的宽度、占位符文本等

内容的提问来源于stack exchange，提问作者williamzo