时间戳

首页 > 解决方案 > 向左显示输入而不是向右

javascript - 向左显示输入而不是向右

问题描述

我的代码显示并显示了搜索图标右侧的输入框。我想让它滑动打开，这样输入就在左侧。然而，我的尝试只会让事情变得更糟。

感谢您的帮助。

下面是显示右侧的输入框的工作示例。

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click",function(){
    document.querySelector('.search-slide').classList.toggle("active");
   document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click",function(){
   document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}
.search {
  min-width: 18.9375em;
}
.search input[type=submit] {
  vertical-align: middle;
  width: 1.375em;
  height: 1.375em;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search input[type=submit]:hover {
  opacity: .5;
}
.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}
.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition:width 0.3s ease;
}

.search-slide.active{width:15.5625em}

.search-close {
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="search">
<input type="submit" value="&#xf002;" class="search-btn fa ib-m"><div class="search-slide ib-m">
<input type="search" placeholder="Enter your search" class="ib-m"><div class="search-close ib-m"><i class="fa fa-times"></i></div>
</div></div>

以下是我做我最终目标的失败尝试：

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click",function(){
    document.querySelector('.search-slide').classList.toggle("active");
   document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click",function(){
   document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}
.search {
  min-width: 18.9375em;
}
.search input[type=submit] {
  vertical-align: middle;
  width: 1.375em;
  height: 1.375em;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search input[type=submit]:hover {
  opacity: .5;
}
.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}
.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition:width 0.3s ease;
}

.search-slide.active{width:15.5625em}

.search-close {
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="search">
<input type="search" placeholder="Enter your search" class="ib-m"><div class="search-slide ib-m">
<input type="submit" value="&#xf002;" class="search-btn fa ib-m"><div class="search-close ib-m"><i class="fa fa-times"></i></div>
</div></div>

标签： javascriptcss

解决方案

有几种方法可以实现您想要的，最简单的一种方法是重新排序 HTML 元素。此外，由于您为图标使用字体，width并且height属性不会影响它们。所以你只需要指定它们的大小font-size。

所以你的代码应该是这样的：

var search_btn = document.querySelector(".search-btn");
search_btn.addEventListener("click", function() {
  document.querySelector('.search-slide').classList.toggle("active");
  document.querySelector('.search-slide input[type=search]').focus();
})

var close_btn = document.querySelector(".search-close");
close_btn.addEventListener("click", function() {
  document.querySelector('.search-slide').classList.toggle("active");
});
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}

.search {
  min-width: 18.9375em;
}

.search input[type=submit] {
  vertical-align: middle;
  border: none;
  outline: none;
  background: none;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}

.search input[type=submit]:hover {
  opacity: .5;
}

.search input[type=search] {
  width: 14em;
  height: 2.5em;
  padding: 0 .375em;
  border: none;
  border-bottom: 1px solid #000;
  margin-left: .1875em;
  background: inherit;
  -webkit-transition: border-color 100ms ease-in-out;
  transition: border-color 100ms ease-in-out;
}

.search input[type=search]:focus {
  border-bottom-color: inherit;
  outline: none;
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
  transition: width 0.3s ease;
}

.search-slide.active {
  width: 15.5625em
}

.search-close {
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}

.search-close:hover {
  opacity: .5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="search">
  <div class="search-slide ib-m">
    <input type="search" placeholder="Enter your search" class="ib-m">
    <div class="search-close ib-m"><i class="fa fa-times"></i></div>
  </div>
  <input type="submit" value="&#xf002;" class="search-btn fa ib-m">
</div>

推荐阅读