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>元素中内联

所以你听一下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();
  }
}

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

std::vector<CallBack<FooBar>> commands;

// initialize the commands
// in charge of sepecifying WHAT will be invoked
FooBar foobar;
commands.emplace_back(foobar, &FooBar::foo);
commands.emplace_back(foobar, &FooBar::bar);

// ... ...

// no need to know the details about functions
// in charge of controlling WHEN will be invoked
for (auto command : commands) {
    command();
}

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

1 个答案: