當輸入選擇時，在鏈接上添加onclick標記

Question

當鼠標懸停在搜索圖標上時，顯示一個搜索輸入。 搜索圖標不可點擊，所以我試圖在鏈接上添加一個onclick來觸發搜索。 但是，當我在移動設備上嘗試此解決方案時，由於我沒有在移動設備上使用鼠標，因此當我選擇搜索圖標時，它會觸發搜索，而不會輸入任何字詞。

下面是HTML：

<div class="search-container"> 
    <form method="get" id="searchform"> 
     <input type="text" name="s" placeholder="<?php echo $search; ?>"> 
     <a style="cursor: pointer;" class="search" onclick="document.getElementById('searchform').submit();" 
      <img src="<?php echo get_template_directory_uri(); ?>/img/search-icon.png" alt="Search" /> 
     </a> 
    </form> 
</div> 

這裏是CSS：

.search-container { 
    overflow: hidden; 
    float: right; 
    width: 37px; 
    -moz-transition: width 0.35s; 
    -webkit-transition: width 0.35s; 
} 
.search-container:hover { 
    width: 20em; 
} 
.search-container:hover input { 
    display: inline-block; 
    width: 200px; 

} 

.search-container input { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none; 
    float: left; 
    width: 0em; 
    margin-right: -42px; 
    font-size: 1em; 
    height: 35px; 
    padding: 5px; 
    border: 0; 
    color:#333; 
    -moz-transition: width 0.25s; 
    -webkit-transition: width 0.25s; 
} 
.search-container input:focus { 
    outline: none; 
} 
.search-container img { 
    float: right; 
    background-color: #df5927; 
    padding: 5px; 
} 

如何激活查找圖標點擊時，才顯示輸入？

Answer 1

你可以按照不同的方式。
如果單擊該圖標並輸入沒有值，顯示輸入，否則提交表單

你必須移動在新功能的點擊處理程序，而不是內嵌在<a>元素

所以你監聽<a>元素

document.querySelector('.search').addEventListener("click", handleClick); 

，然後在點擊時，一個點擊，你檢查輸入具有任何價值，要麼提交或顯示實際輸入

function handleClick(event){ 
    var input = document.querySelector("input[name='s']"); 
    if(input.value.length == 0){ 
    //dont submit and show input for mobile 
    } else { 
    // input has value, submit form 
    document.getElementById('searchform').submit(); 
    } 
}