javascript - 调整窗口大小或旋转移动设备上的后退图像按钮位置

Question

从这里开始 tag img position on resize window or rotate mobile device ，现在我需要在“搜索...”之前添加另一个图像(如后退按钮)(放大镜现在可以)。

默认情况下，第二个图像(后退按钮)是隐藏的，当我按下搜索输入时，我想显示它。当我按下回车键时，它消失了。

我尝试了多个背景，但我不知道如何使后退按钮可点击。

我试过了，但是当我调整窗口大小时或当我旋转移动设备时，背面图像移动并且看起来不太好。

HTML:

     ...
<div id="input_search">
      <form method="post">
       <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Cautati...">
      </form>
      <img id="back" src="img/back.png">
     </div>
...

CSS:

#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  float: left;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
}

#search {
  background-image: url('/img/loupa.png');
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 11px;
}

.indent1 {
   text-indent: 17px;
}

.indent2 {
   text-indent: 57px;
}

#back {
   float: left;
   position: relative;
   display: none;
   height: 24px;
   margin-top: -11%;
   margin-left: 1%; 
}

JS:

$(document).ready(function() {
   $('#input_search #search').addClass('indent1');
});


$('#search').click(function() {
  $('#input_search #search').removeClass('indent1');
  $('#input_search #search').addClass('indent2');
  $('#back').show();
});


$('#search').keypress(function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13') {
      $( function() {
         $('#back').hide();
         $('#search').removeClass('indent2');
         $('#input_search #search').addClass('indent1');

      });
   }
});

我该如何解决这个问题？ 谢谢

附言。请原谅我糟糕的英语。

Answer 1

您可以在 form 元素上使用 flex(这样您就可以摆脱 float)并将图像包装在 a 标签中使其可点击。

$(document).ready(function() {
   $('#input_search #search').addClass('indent1');
});
$('#search').click(function() {
  $('#input_search #search').removeClass('indent1');
  $('#input_search #search').addClass('indent2');
  $('#back').show();
});
$('#search').keypress(function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13') {
      $( function() {
         $('#back').hide();
         $('#search').removeClass('indent2');
         $('#input_search #search').addClass('indent1');

      });
   }
});

#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
  display:inline-block;
}
#input_search form {
  width: 100%;
  background-color: #ffa366;
  display:flex;
  align-items:center;
  padding:0 5px;
}
#search {
  background-image: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 11px;
}
.indent1 {
   text-indent: 17px;
}
.indent2 {
   text-indent: 17px;
}
#back {
   position: relative;
   display:none;
   height: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="input_search">
      <form method="post">
        <a href="#"><img id="back" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"></a>
       <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Cautati...">
      </form>
      
     </div>