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")将类添加到输入字段。

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

1 个答案: