在输入焦点改变时更改标签的字体大小。

Question

我想实现类似于这个使用styled-components的浮动标签输入框： https://jsfiddle.net/273ntk5s/3650/

但是我的表单是动态加载的，所以标签先加载，然后才是输入框。当输入框类型为文本且之后加载时，输入框聚焦事件不起作用。有没有方法可以实现这个功能？我也尝试了jQuery，但仍然无法解决。

CSS:

var oldSize;
$('#FirstName').focus(function() {
  oldSize = $("label[for='FirstName']").css('font-size');
  $("label[for='FirstName']").css('font-size', 12);
});
$('#FirstName').blur(function() {
  $("label[for='FirstName']").css('font-size', oldSize);
});

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  transition: 0.2s ease all;
}
input[id='FirstName']:focus + .floating-label
{
    font-size: 11px;
}

<div>
  <label for="FirstName" class="mktoLabel mktoHasWidth floating-label" style="width: 100px;">First name:</label>
  <input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid inputText" style="width: 150px;">

</div>

- Vrishty Garg

---

在你的fiddle中添加jQuery后，它可以正常工作。 - Taki

Answer 1

font-size接受以##px格式表示的值。仅输入数字是不起作用的。您还需要在示例中正确引用jQuery。

var oldSize;
$('#FirstName').focus(function() {
  oldSize = $("label[for='FirstName']").css('font-size');
  $("label[for='FirstName']").css('font-size', '42px');
});
$('#FirstName').blur(function() {
  $("label[for='FirstName']").css('font-size', oldSize);
});

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  transition: 0.2s ease all;
}
input[id='FirstName']:focus + .floating-label
{
    font-size: 11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="FirstName" class="mktoLabel mktoHasWidth floating-label" style="width: 100px;">First name:</label>
  <input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid inputText" style="width: 150px;">

</div>

- CertainPerformance

---

这个可以工作，但我还有另一个问题，就是在我的表单中，输入类型文本边框在焦点上也会稍微向上移动。我希望输入类型文本边框底部固定不动，只改变字体大小。 - Vrishty Garg