Question

如何在单击相应的文本框时显示或触发datalist选项？我有一个数据列表，选项说10.在chrome中，会显示一个下拉图标，允许用户知道它有一个下拉列表。但是在Firefox中，图标不可用。因此，用户可能不知道它是一个下拉菜单而只是一个文本框。所以我想在点击该文本框时显示datalist选项。任何帮助表示感谢。

Answer 1

也许解决方案可能是这个（Fiddle）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input::-webkit-calendar-picker-indicator {
  display: none;/*remove default arrow in Chrome*/
}
.required:after {
    content: url(http://s25.postimg.org/6k40u5hcr/arrow.png);
    margin-left: -20px; 
    padding: .1em;
    pointer-events:none;/*make png cliccable*/
}
</style>
</head>
<body>
    <span class="required"><input id="team" list="bestTeam"></span>
     <datalist id="bestTeam">
       <option value="Inter">
       <option value="Milan">
       <option value="Juve">
       <option value="Roma">
     </datalist>
   </body>
</html>

首先，我删除了chrome中的默认箭头，输入:: - webkit-calendar-picker-indicator
在元素之后我在内容属性中设置了一个小图像使图像可点击使用指针 - 事件：无
此解决方案适用于最新版本的Chrome，Firefox和IE 如果这个解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 2

这是一个无法修改的浏览器内置功能。此外，Safari和IE10的较低版本都不支持datalist

要完成此功能，请使用此polyfill：webshim。这将为Safari和IE提供功能支持，并将datalist转换为常规ul列表，然后您可以轻松附加事件以显示/隐藏列表，而不会丢失自动完成功能。

触发文本框的单击事件上的datalist选项

2 个答案: