我想实现类似于这个使用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>