gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:02:15 25 4
gpt4 key购买 nike

有些人可能已经知道样式选择元素是一场噩梦,如果没有一些 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);

如有任何帮助,我们将不胜感激

干杯

最佳答案

我使用以下代码:

<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(内置功能)

鼠标悬停:
恢复旧值

然后选择新值。

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

关于javascript - 在输入时触发焦点事件时使 HTML5 数据列表可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15622076/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com