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

Add onclick tag on a link when input selected

本文关键字：添加 onclick 标记 链接 输入 选择      更新时间：2023-09-26

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

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

您可以遵循不同的方法。
如果单击该图标并且输入没有值，则显示输入，否则提交表单

您必须在新函数中移动单击处理程序，而不是在 <a> 元素中内联

所以你听<a>元素的点击

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();
  }
}
相关文章：