由于Css Transition，点击未完成

时间：2016-11-17 08:48:38

标签： javascript jquery html css css3

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

编辑：请参阅claudios代码段，了解我的意思

编辑2： .mouseDown()而非.click()无效。因此，当我点击搜索图标时，搜索框中的焦点会丢失，这会让它回归它的原始尺寸。这似乎发生在mouseUp事件之前，这意味着搜索图标的坐标不再与.click()事件相同。

enter image description here enter image description here

所以我启动了调试器，将搜索框设置为焦点并设置我的断点并且它可以工作。我可以假设我的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>

2 个答案:

答案 0 :(得分：1)

据我所知，您希望图标有两个作业

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

    3. 使用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>

答案 1 :(得分：0)

它在这里工作。也许这与你的图标css或其他东西有关。

$('.icon-wrapper').click(function() {
  var searchQuery = jQuery('#searchBox').val();
  if (searchQuery != "") {
    alert(searchQuery);
    searchSubmit(searchQuery);
    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: #000;
}

.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;
}

.icon-wrapper img {
  height: 30px;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="expandable-search vertical-center">
    <input type="search" id="searchBox">
    <span class="icon-wrapper">
      <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png">
    </span>
  </li>
</ul>

相关问题
最新问题