Question

我正在考虑在datalist选项的顶部添加一个隐形按钮，因此我可以点击datalist来触发事件。为什么这不起作用？

   var button=document.createElement("button")
   button.style.width=option.style.width;
   button.style.height=option.style.height;
   button.style.background="#EEEEEE"
   option.appendChild(button);
   button.onclick="clickedfriendsOption()";

Answer 1

您无法在<datalist>内添加按钮，也无法收听<option>上的活动。 <datalist>控制<input>。因此，您需要收听oninput元素的<input>事件，以获取<datalist>中选择的元素。

input.addEventListener('input', clickedfriendsOption);

DEMO（打开你的控制台）：

＆＃13;

document.getElementById('test').addEventListener('input', function(){
  console.log(this.value);
});

＆＃13;

<label for="test">Test:</label>
<input type="text" id="test" list="testlist">
<datalist id="testlist">
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
</datalist>

＆＃13;

Answer 2

首先，代码中的最后一行不起作用。这样做：

button.onclick=function(){clickedfriendsOption()}

正如您所说，点击您的按钮就像执行此功能一样：

function f(){
     return "clickedfriendsOption()";   
     //Observe that "clickedfriendsOption()" is a string and not a function
}

其次，有一种更好的方法可以使元素不可见而不是改变颜色：

button.style.visibility="hidden";

按钮datalist黑客

2 个答案: