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

Question

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

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

所以我有这个代码 -在 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);

任何帮助，将不胜感激，

干杯

Answer 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>

鼠标移到：
在 -- 全局 -- 变量中设置焦点并记住旧值

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

鼠标上移：
恢复旧值

然后选择新值。

发现这是针对组合框的可接受的解决方法。

Answer 2

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

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

在 mouseout 时，它将从变量 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>

Answer 3

在“Ulrich Berth”响应中，当点击输入时，输入中的值将被重置，无法选择里面的文本。 您可以使用它来避免该问题：

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

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

function inputFocus(){
    var input = document.getElementById("input");
    if(input.value == ""){
        value = '';
    }else{
        old = value = input.value;
    }
}

Answer 4

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

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

dataListElement.style.display = "block";

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

dataListElement.style.display = "none";

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

Answer 5

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

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

问题描述

5 个解决方案

解决方案1
10 2013-12-17 23:15:39

解决方案2
7 2017-10-25 12:48:22

解决方案3
0 2022-06-06 07:29:31

解决方案4
-2 2020-02-14 13:06:06

解决方案5
-3 2013-03-26 20:36:47

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

问题描述

5 个解决方案

解决方案1 10 2013-12-17 23:15:39

解决方案2 7 2017-10-25 12:48:22

解决方案3 0 2022-06-06 07:29:31

解决方案4 -2 2020-02-14 13:06:06

解决方案5 -3 2013-03-26 20:36:47

解决方案1
10 2013-12-17 23:15:39

解决方案2
7 2017-10-25 12:48:22

解决方案3
0 2022-06-06 07:29:31

解决方案4
-2 2020-02-14 13:06:06

解决方案5
-3 2013-03-26 20:36:47