在输入触发焦点事件时使 HTML5 数据列表可见答案

【问题标题】：Making HTML5 datalist visible when focus event fires on input在输入触发焦点事件时使 HTML5 数据列表可见
【发布时间】：2013-03-25 18:27:17
【问题描述】：

正如一些人可能已经知道的那样，选择元素的样式是一场噩梦，如果没有一些 javascript 技巧，实际上是不可能的。 HTML5 中的新数据列表可以起到相同的作用，因为用户会看到一个选项列表，并且值记录在输入文本字段中。

这里的限制是，在用户开始在文本字段中输入内容之前，列表不会出现，即使这样，也只会根据他们的输入显示可能的匹配项。我想要的行为是，只要将焦点放在该字段上，整个选项列表就会变得可见。

所以我有这个代码 - view on jsbin

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

我正试图用这个 Javascript 来显示它：

    var catVal = document.getElementsByTagName("input")[0],
    cat = document.getElementById("categories");

    catVal.style.fontSize = "1.3em";

    catVal.addEventListener("focus", function(event){
     cat.style.display = "block";
    }, false);

任何帮助将不胜感激，

干杯

【问题讨论】：

我正在努力实现同样的目标，到目前为止你运气好吗？

标签： javascript jquery html

【解决方案1】：

我使用以下代码：

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

鼠标悬停：
设置焦点并记住a--g l o b a l--变量中的旧值

鼠标按下：
删除值并显示datalist（内置功能）

鼠标：
恢复旧值

然后选择新值。

找到一个可接受的组合框解决方法。

【讨论】：

这是如何完成 OP 要求的？
是否需要任何 jquery 代码。我认为 datalist 和带有列表关联的输入应该足以满足需要（在 chrome 中）或者我在这里缺少任何浏览器兼容性问题？

【解决方案2】：

希望你喜欢这个解决方案：

我在输入字段中添加了一个“temp”属性进行存储，一旦鼠标悬停在输入字段上，它会将其当前值保存在 temp 中，然后删除该值以便打开数据列表。

鼠标移出时，它将从变量 temp 中恢复字段的值。这个解决方案在我测试过的 Chromium 下运行良好。

作为奖励，您可以添加placeholder="Click to see all your options"

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;">
<datalist id="myDatalist" open="open"> 
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>

【讨论】：

我觉得规范应该有另一个 INPUT 属性来指导浏览器提供这种行为或其他东西。从可用性的角度来看，我认为缺少列表/数据列表规范。您的解决方案是一个干净、简单的解决方法！谢谢！
当下拉菜单在您的示例中打开并且我滚动页面时，下拉菜单也会向下滚动（使用铬）。使用 datalist 之前从未见过这种行为。

【解决方案3】：

问题很老了，但它是谷歌上的热门搜索，没有找到答案，所以我会在这里添加。

要在第一次点击时展开数据列表，您需要设置

dataListElement.style.display = "block";

并立即将其隐藏在下一行，因此它不会在您的 DOM 中显示为元素，但只会在输入元素下展开。

dataListElement.style.display = "none";

截至今天，它仅在 Firefox 中不会在首次点击时展开。

【讨论】：

【解决方案4】：

HTML：

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

jQuery:

var result='';
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

工作的 JS 箱

http://jsbin.com/urupit/4/watch

【讨论】：

很好的想法，但这不是我所追求的行为，对于我们的 UX，我们不想创建一个持有者 div，因为我们将至少有 3 个这些输入并排。我希望数据列表在输入获得焦点事件时显示。
为什么不双击输入类型的文字呢？它将显示整个列表。
作为开发人员，我知道这是我需要做的事情，但对于最有可能习惯在输入框中单击一次并开始输入的用户来说，这并不明显，为什么我'试图在他们聚焦后立即触发第二次点击
被告知才知道双击，否则不明显