javascript - 用jQuery展开onClick的输入框

Question

我的页面上有这个 input[type="text"]，我已经为此工作了一段时间。我想做的是在用户点击它时创建它扩展的效果。另外，我希望它在鼠标离开时恢复到正常宽度。

到目前为止我的代码:

$(document).ready(function() {
  $("input").click(function() {
    var i;
    for (i = 250; i < 501; i++) {
      $(this).css("width", (i.toString + "px"))
    }
  })
})

input[type="text"] {
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  border-style: none;
  height: 50px;
  width: 250px;
}

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

我在这里使用了 .click() jQuery 函数。还有其他功能可以检测元素中的光标吗？类似 .cursorIn() 的东西，如果它存在的话。

Answer 1

您可以使用 transition: width ease 1s(如果需要，还可以使用 :hover 伪元素)

请看下面的演示:

$(document).ready(function() {
  $("input").click(function() {
    $(this).css("width", "500px")
  })
})

input[type="text"] {
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  border-style: none;
  height: 50px;
  width: 250px;
  transition: width ease 1s;
}

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

使用纯 CSS，您可以像这样使用 focus 伪元素:

input[type="text"] {
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  border-style: none;
  height: 50px;
  width: 250px;
  transition: width ease 1s;
}
input[type="text"]:focus {
  width : 500px;
}

<input type="text">