Question

我有这段代码： input type="text" name="email" id="email" value="" placeholder="" class="txt"

这是一个简单的输入。

我需要什么。 点击此输入类型=＆＃34; text＆＃34; - ＆gt; 会出现一个包含多个选项的下拉菜单（但仍可以手动将某些内容写入此输入类型=＆＃34; text＆＃34;） - ＆gt; 点击任意选项 - ＆gt; 其中一个选项已插入输入类型=＆＃34; text＆＃34; - ＆gt; 再次点击输入类型=＆＃34; text＆＃34; - ＆gt; 显示包含多个选项的同一下拉菜单。

请帮忙。

Answer 1

这不能单独使用标准表单控件完成，但您可以自己创建。请参阅以下评论以获得解释。

＆＃13;

// Get references to elements used
var input = document.getElementById("selectedBrowser");
var list = document.getElementById("list");

// Get all the list items into an array
var listItems = Array.prototype.slice.call(document.querySelectorAll("#list > div"));

// Make the "drop down" list the same width as the input
list.style.width = getComputedStyle(input).width;

// Set up click handler on the input
input.addEventListener("click", function(){ 
 list.classList.remove("hidden");  // Show the list
});

// Set up input event handler on input
input.addEventListener("input", function(){ 
 list.classList.add("hidden");  // Hide the list
});


// Loop over the list items
listItems.forEach(function(item){
  // Set up a click event handler
  item.addEventListener("click", function(){
    input.value = item.textContent;    // Copy the value into the input
   list.classList.add("hidden");       // Hide the list
  });

  // Set up a mouseover event handler
  item.addEventListener("mouseover", function(){
    item.classList.add("highlight");       // Hide the list
  });
  
  // Set up a mouseout event handler  
  item.addEventListener("mouseout", function(){
    item.classList.remove("highlight");       // Hide the list
  });
});

＆＃13;

/* Applied to the drop down list by default to hide it and
   removed when the list needs to be shown. */
.hidden {
 display:none;
}

#container {
  display:inline-block;
  vertical-align:top;
}

/* Ensures that the input will be positioned at the top-left of its parent */
#selectedBrowser {
  position:absolute;
}

#list {
  position:absolute; /* Position at top-left of parent */
  top:1.85em;  /* But, then move down to be below the input */
  border:1px solid #e0e0e0; 
  height:5em;  /* Limit height of list */
  overflow-y:scroll; /* Add vertical scroll bar when list won't fit in height */
}

#list > div {
  cursor:pointer;
  user-select:none;
  margin:2px 0;
}

.highlight {
  background-color:rgba(255, 255, 0, .5);
}

＆＃13;

<label for="selectedBrowser">Choose a browser from this list:</label>
<div id="container">
  <input id="selectedBrowser" name="browser">
  <div id="list" class="hidden">
    <div>Chrome</div>
    <div>Firefox</div>
    <div>Internet Explorer</div>
    <div>Opera</div>
    <div>Safari</div>
    <div>Microsoft Edge</div>
  </div>
</div>

＆＃13;

Answer 2

HTML5有一个内置的input和一个datalist，可以呈现为combo box。您向list添加input属性，该属性与id中datalist的值相匹配。示例如下所示。

<input type="text" list="items" />
<datalist id="items">
  <option>Item1</option>
  <option>Item2</option>
  <option>Item3</option>
  <option>Item4</option>
</datalist>

此解决方案的一个问题是Apple Safari浏览器不支持它。 W3Schools具有最新的兼容性信息。

如果兼容性是个问题，那么可以使用许多jQuery或javascript解决方案来解决问题。这是一个link到Javascript解决方案，可能适合您。

输入类型=＆＃34;文字＆＃34;单击输入类型=＆＃34;文本＆＃34;

2 个答案: