在輸入焦點上更改標簽的字體大小

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>