Javascript 选择输入时在链接上添加onclick标记

我有一个搜索输入，当鼠标悬停在搜索图标上时显示。 搜索图标无法单击，因此我尝试在链接上添加一个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>

---

如何仅在显示输入时激活单击搜索图标？

您可以按照不同的方法操作。
如果单击图标而输入没有值，则显示输入，否则提交表单

您必须在新函数中移动单击处理程序，而不是在

元素中内联

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

因此，您可以监听对

元素的单击

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

然后，当点击a时，检查输入是否有任何值，然后提交它或显示实际输入

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();
  }
}

---

谢谢你的回答，它在安卓手机和个人电脑上运行得非常好，但是，Iphone有一个问题。当文本填充到输入中时，点击不是句柄，真的strange@MarcElBichon当输入被展开时，你能看到一些元素是否与图标重叠吗？没有，但经过一些测试，问题似乎只出现在iphone 5上。这很奇怪，但我可以带着它离开，谢谢你的时间。@MarcElBichon没问题。只需尝试z-index=999破解，以确保它位于层的顶部