點擊表單時，標簽會向上移動，但是當用戶從輸入字段中單擊時，標簽不會恢復正常

Question

基本上，我正在創建一個表單，其中用戶單擊該字段，標簽重新定位到該字段的頂部。

當用戶單擊字段時，我可以使標簽向上移動，但是當用戶單擊字段時，標簽不會回到該正確位置。

 $(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); }); 

 .form-item { position: relative; margin-bottom: 1em; transition: color 0.4s ease; color: #b4b4aa; } .form-item--with-scaling-label label { top: 0; left: 0; position: absolute; pointer-events: none; transform-origin: 0 0; z-index: 1; padding: 17px 20px; transition: transform 0.2s; transition-timing-function: ease-out; } .form-item__label { display: inline-block; font-weight: normal; vertical-align: middle; color: #b4b4aa; padding: 10px 10px 10px 0; } .form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea { padding: 15px; border: 1px solid #d2d2c8; background-color: #fff; border-radius: 3px; background-clip: padding-box; width: 100%; transition: 0.1s all linear; } .form-item--with-scaling-label input, .form-item--with-scaling-label textarea { padding: 21px 20px 10px 20px; } .form-item--with-scaling-label.form-item--input-filled label { transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item--with-scaling-label js-form-item form-item form-item-textfield"> <label for="form-field-label" class="form-item__label font-weight-bold">First name</label> <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128"> </div> 

謝謝您的幫助！

干杯

Answer 1

就您而言，我認為您無需跟蹤元素外部的點擊，因為當您的輸入失去焦點時您需要一個事件。 為此，您可以在input添加.blur()偵聽器，並刪除之前添加的類。

https://api.jquery.com/blur/

Answer 2

使用.blur() ，它將解決您的問題。

 $(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); }); $(".js-form-item > input").on("blur", function() { $(this).parent().removeClass('form-item--input-filled'); }); 

 .form-item { position: relative; margin-bottom: 1em; transition: color 0.4s ease; color: #b4b4aa; } .form-item--with-scaling-label label { top: 0; left: 0; position: absolute; pointer-events: none; transform-origin: 0 0; z-index: 1; padding: 17px 20px; transition: transform 0.2s; transition-timing-function: ease-out; } .form-item__label { display: inline-block; font-weight: normal; vertical-align: middle; color: #b4b4aa; padding: 10px 10px 10px 0; } .form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea { padding: 15px; border: 1px solid #d2d2c8; background-color: #fff; border-radius: 3px; background-clip: padding-box; width: 100%; transition: 0.1s all linear; } .form-item--with-scaling-label input, .form-item--with-scaling-label textarea { padding: 21px 20px 10px 20px; } .form-item--with-scaling-label.form-item--input-filled label { transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item--with-scaling-label js-form-item form-item form-item-textfield"> <label for="form-field-label" class="form-item__label font-weight-bold">First name</label> <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128"> </div> 

但我認為您應該使用.focus()而不是.focus() .click()函數

 $(".js-form-item > input").on("focus", function() { $(this).parent().addClass('form-item--input-filled'); }); $(".js-form-item > input").on("blur", function() { $(this).parent().removeClass('form-item--input-filled'); }); 

 .form-item { position: relative; margin-bottom: 1em; transition: color 0.4s ease; color: #b4b4aa; } .form-item--with-scaling-label label { top: 0; left: 0; position: absolute; pointer-events: none; transform-origin: 0 0; z-index: 1; padding: 17px 20px; transition: transform 0.2s; transition-timing-function: ease-out; } .form-item__label { display: inline-block; font-weight: normal; vertical-align: middle; color: #b4b4aa; padding: 10px 10px 10px 0; } .form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea { padding: 15px; border: 1px solid #d2d2c8; background-color: #fff; border-radius: 3px; background-clip: padding-box; width: 100%; transition: 0.1s all linear; } .form-item--with-scaling-label input, .form-item--with-scaling-label textarea { padding: 21px 20px 10px 20px; } .form-item--with-scaling-label.form-item--input-filled label { transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item--with-scaling-label js-form-item form-item form-item-textfield"> <label for="form-field-label" class="form-item__label font-weight-bold">First name</label> <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128"> </div> 

希望這能解決您的問題。

Answer 3

基本上，您無需檢查標簽何時應返回其默認位置。 從邏輯上講，如果輸入字段為空，標簽將返回其位置。 通過將blur事件偵聽器附加到具有.form-item__input類的輸入字段，我們可以實現所需的行為。 所以檢查一下：

 $(".js-form-item").on("click", function () { $(this).addClass('form-item--input-filled'); }); $(".form-item__input").on("blur", function () { if($(this).val() === '') { $(this).parent('.js-form-item').removeClass('form-item--input-filled'); } }); 

 .form-item { position: relative; margin-bottom: 1em; transition: color 0.4s ease; color: #b4b4aa; } .form-item--with-scaling-label label { top: 0; left: 0; position: absolute; pointer-events: none; transform-origin: 0 0; z-index: 1; padding: 17px 20px; transition: transform 0.2s; transition-timing-function: ease-out; } .form-item__label { display: inline-block; font-weight: normal; vertical-align: middle; color: #b4b4aa; padding: 10px 10px 10px 0; } .form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea { padding: 15px; border: 1px solid #d2d2c8; background-color: #fff; border-radius: 3px; background-clip: padding-box; width: 100%; transition: 0.1s all linear; } .form-item--with-scaling-label input, .form-item--with-scaling-label textarea { padding: 21px 20px 10px 20px; } .form-item--with-scaling-label.form-item--input-filled label { transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1); } 

 <div class="form-item--with-scaling-label js-form-item form-item form-item-textfield"> <label for="form-field-label" class="form-item__label font-weight-bold">First name</label> <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128"> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 

僅當輸入字段為空時，標簽才會返回到其默認位置，因此，如果輸入字段具有某些值，標簽將停留在頂部。

Answer 4

您的代碼還可以，請僅對此進行更改。 它將時尚！ 簡單而簡短：

$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
    function(){
        $(this).removeClass('form-item--input-filled');
    }
);

---

額外說明：

我使用了focusout事件，它始終可以正常運行。 我已經在手機上對其進行了測試，一切都很好。