单击提交按钮时输入css展开问题

Question

所以当我单击输入字段时.. 它会展开，这太棒了。但是当我点击提交按钮时。它缩小了..我如何保持它扩大？

HTML：

<div class="search-container">
  <input class="from-control" id="searchTerm" name="textarea"
  type="search" placeholder="Search">
   <button class="btn btn-success btn-xs" type="button" name="button"
   id="search">Search</button>
</div>

CSS：

.search-container {
margin-top: 25px;
}

.from-control {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
width: 124px;
height: 35px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}

input.from-control:focus {
width: 40vmax;
border: 1px solid #ccc;
}

Answer 1

由于您使用:focus 扩展输入，因此当焦点更改为其他内容（在本例中为提交按钮）时，它在逻辑上会缩小。我猜您在单击提交按钮时进行了异步调用，因为您在表单中没有任何操作。

一个可能的解决方案是创建一个新类

input.form-control.expanded {
    width: 40vmax;
    border: 1px solid #ccc;
}

然后在您的onClick() 函数中，您可以使用addCLass("expanded") 将类添加到输入字段。