我有很多输入标签，每个输入标签有一个ul从哪里可以选择列表元素来插入值到输入字段

但问题是当我已经添加onclick事件到每个输入标签，关闭然后分别使用display none和block来打开ul的焦点。因为我每次模糊输入模糊ul事件监听器不起作用。这里是代码。我有很多输入标签，每个输入标签有一个ul从哪里可以选择列表元素来插入值到输入字段

var selectTime= document.querySelectorAll("input"); 
    for(var i=0; i<selectTime.length; i++) { 
       selectTime[i].onfocus = function(event) { 
        var el = event.currentTarget; 
       el.nextElementSibling.style.display = "block";//ul is show 
      } 
    } 
    for(var i=0; i<selectTime.length; i++) { 
       selectTime[i].onblur = function(event) { 
       var el = event.currentTarget; 
       el.nextElementSibling.style.display = "none";//ul is none 
       } 
    } 
    for(i=0;i<ulElements.length;i++){ 
    ulElements[i].onclick= function(event){ 
       if (event.target.tagName === 'LI'){ 
        console.log(event.target); 
       } 
     } 
    }

但是从UL里选择的元件不是在控制台

这里显示为演示https://jsfiddle.net/fzbx36zf/

来源

2017-03-20 Thala

- 你能分享可执行演示/片断或[的jsfiddle（https://jsfiddle.net/）？ [_创建一个最小，完整和可验证的示例_]（http://stackoverflow.com/help/mcve） – Rayon

它没有显示任何东西，我认为问题是我把列表ul作为none，所以没有显示。好吧，我将分享演示 – Thala

在jsfiddle中添加演示 – Thala

作为click-event任何地方调用外部input元件，onblur处理程序因而onclick调用ul元件上没有被执行。

setTimeout里面onblur处理程序将帮助！

var ulClicked = false; 
 
document.querySelector('input').onfocus = function() { 
 
    document.querySelector('ul').style.display = "block"; 
 
} 
 
document.querySelector('input').onblur = function(e) { 
 
    setTimeout(function() { 
 
    if (!ulClicked) { 
 
     document.querySelector('ul').style.display = "none"; 
 
    } else { 
 
     alert('UL clicked'); 
 
    } 
 
    ulClicked = false; 
 
    }, 100); 
 
} 
 
document.querySelector('ul').onclick = function(event) { 
 
    ulClicked = true; 
 
    document.querySelector('input').value = event.currentTarget.textContent.trim(); 
 
}

<input/> 
 
<ul style="display:none"> 
 
    <li>tiger</li> 
 
</ul>

来源

2017-03-20 05:52:16 Rayon

我检查了它，它不起作用 – Thala

什么不起作用？ – Rayon

我有很多输入标签，每个输入标签有一个ul从哪里可以选择列表元素来插入值到输入字段

回答

相关问题