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

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>