在输入焦点上更改标签的字体大小

Question

我正在尝试在输入焦点上实现浮动标签,因为这个带有样式组件: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>

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>