javascript - 由于 Css Transition，点击未完成

Question

当我点击搜索图标时，事件会按预期触发。但是，当搜索框展开时，不会触发点击，相反，搜索框会再次变小。

编辑:请参阅 claudios 片段了解我的意思

编辑 2:.mouseDown() 而不是 .click() 有效。 所以当我点击搜索图标时似乎，搜索框中的焦点丢失，使其恢复到原来的大小。这似乎发生在 mouseUp 事件之前，这意味着搜索图标的坐标不再与 .click() 事件相同。

因此，我启动了调试器，将搜索框设置为焦点并设置了断点，它开始工作了。我可以假设我的 Css 转换阻止了点击操作的完成吗？如果是这样，我如何在 css 生效之前获得点击？

这里是所有相关代码:

jQuery('.icon-wrapper').click(function(){
    var searchQuery = jQuery('#searchBox').val();
    if(searchQuery != ""){
        alert("I got clicked!");
        return;
    }
});  

.expandable-search input[type=search]:focus {
    width: 80%;
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}


input[type=search] {
    border: solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 55px;

    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}


.expandable-search input[type=search] {
    padding-left: 10px;
    color: transparent;
}

.expandable-search input[type=search]:hover {
    background-color: #fff;
}

span.icon-wrapper:hover {
    cursor: pointer;
}

.expandable-search input[type=search]:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}
.expandable-search input:-moz-placeholder {
    color: transparent;
}
.expandable-search input::-webkit-input-placeholder {
    color: transparent;
}

.expandable-search .icon-wrapper:after {
   content: url("http://ak-static.legacy.net/obituaries/images/obituary/obituaryportal/icon_search.png");
   font-family:"Glyphicons Halflings";
   position: absolute;
   left: 20px;
   top: 10px;
   color: #212121;
   font-size: 20px;
   left: 50px;
   top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li class="expandable-search vertical-center">
    <input type="search" id="searchBox">
    <span class="icon-wrapper"></span>
</li>

Answer 1

据我所知你想要的问题是图标有两个工作

1. 首先展开搜索输入
2. 之后就像一个提交按钮。甚至可以检查搜索输入是否有值(value)。如果是，请执行请求，例如通过 ajax 发帖，否则不执行任何操作或显示用户必须填写内容的消息。

使用 CSS :focus

一个问题是，每次您现在单击该图标时，搜索输入都会失去焦点，因为您的图标不是该输入的内容。因此，您使用 CSS 添加的 :focus 将被删除。一种解决方案是使用伪元素，只需将图标放在 :after 或 :before 内容中，但由于您不能在输入中使用它们中的任何一个，你必须做一个变通办法来实现你想要的。所以在你的情况下，我认为唯一的方法是通过 JavaScript 模拟焦点。

你可以用下面的代码实现这个

HTML

<div id="search">
  <button id="search-button">
    <i class="ion-ios-search"></i>
  </button>
  <input type="search" id="search-input" />
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #eee;
}

input {
  display: none;
}

#search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  font-size: 0;
}

#search-button,
#search-input {
  display: inline-block;
  background: white;
  border: none;
  outline: none;
}

#search-button {
  position: relative;
  width: 40px;
  height: 100%;
  border: none;
  cursor: pointer;
}

#search-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  margin: 0;
}

#search-input {
  height: 100%;
  width: 0;
  font-size: 20px;
  vertical-align: top;
  transition: 0.3s;
  padding: 0;
}

.clicked + #search-input {
  width: 200px;
}

jQuery

var $searchButton = $("#search-button");
var $searchInput = $("#search-input");

$searchButton.click(function() {
  $searchInput.focus();
  if ($searchInput.val() !== "") {
    alert("post");
  } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") {
    $(this).addClass("clicked");
  } else if ($(this).hasClass("clicked") && $searchInput.val() === "") {
    alert("fill");
  }
});

$(document).click(function(e){
  if(!$("#search").has(e.target).length && $searchInput.val() === ""){
    $searchButton.removeClass("clicked");
  }
});

var $searchButton = $("#search-button");
var $searchInput = $("#search-input");

$searchButton.click(function() {
  $searchInput.focus();
  if ($searchInput.val() !== "") {
    alert("post");
  } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") {
    $(this).addClass("clicked");
  } else if ($(this).hasClass("clicked") && $searchInput.val() === "") {
    alert("fill something in");
  }
});

$(document).click(function(e) {
  if (!$("#search").has(e.target).length && $searchInput.val() === "") {
    $searchButton.removeClass("clicked");
  }
});

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: #eee;
}
input {
  display: none;
}
#search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  font-size: 0;
}
#search-button,
#search-input {
  display: inline-block;
  background: white;
  border: none;
  outline: none;
}
#search-button {
  position: relative;
  width: 40px;
  height: 100%;
  border: none;
  cursor: pointer;
}
#search-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  margin: 0;
}
#search-input {
  height: 100%;
  width: 0;
  font-size: 20px;
  vertical-align: top;
  transition: 0.3s;
  padding: 0;
}
.clicked + #search-input {
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
  <button id="search-button">
    <i class="ion-ios-search"></i>
  </button>
  <input type="search" id="search-input" />
</div>