我有很多輸入標籤，每個輸入標籤有一個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從哪裏可以選擇列表元素來插入值到輸入字段

回答

相關問題