输入字段将不起作用(无法在其中键入文本) [英] Input field wont function (Can't type text in it)

问题描述

我有一个搜索框，当您单击div时，它会滑出，但不会让我输入任何文字，我也找不到原因.

I have a search box which slides out when you click on a div but it wont let me put any text in and I can't find a reason why.

$('#searchh').click(function() {
  $('.search-button').animate({
    'left': '520px'
  });
});

$('#searchh').click(function() {
  $('.search-balk').animate({
    'width': '295px'
  });
});

.search-button {
  position: absolute;
  left: 225px;
  margin-top: -30px;
  z-index: -1;
  -webkit-transition: background-position 0.8s, color 1s;
  -moz-transition: background-position 0.8s, color 1s;
  transition: background-position 0.8s, color 1s;
}
.search-balk {
  position: absolute;
  right: 50px;
  height: 71px;
  width: 260px;
  background-color: #000;
  border: none;
  padding-left: 10px;
  color: #fff;
  z-index: 33;
}

<div class="search-button">
  <input class="search-balk" type="text" name="search" placeholder="Vul hier je zoekwoord in...">
  <img src="/assets/images/search.png" />
</div>

推荐答案

删除.搜索按钮{/*位置:绝对；*/}

Remove .search-button { /* position: absolute; */ }

您会看到问题所在，是尝试在其顶部创建一个div并将其定位为相对位置.

and you see what the problem is try to make a div on top of it and gief it position relative.

这篇关于输入字段将不起作用(无法在其中键入文本)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！