点击表单时，标签会向上移动，但是当用户从输入字段中单击时，标签不会恢复正常

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

就您而言，我认为您不需要跟踪元素外部的点击，因为当您的输入失去焦点时您需要一个事件。为此，您可以将.blur()侦听器添加到input中，并删除先前添加的类。

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()而不是.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

您的代码还可以，请仅对此进行更改。它将时尚！简单而简短：

...
string core_URL = BaseURL_Core+URL_instance;
var response = await client_Core.GetAsync(core_URL);
string xml = await response.Content.ReadAsStringAsync();
System.Xml.Linq.XDocument doc = System.Xml.Linq.XDocument.Parse(xml);
responsedata = doc.Root.Value;
...

---

额外说明：

我使用了$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code .on("focusout", function(){ $(this).removeClass('form-item--input-filled'); } ); 事件，该事件始终可以正常运行。我已经在手机上对其进行了测试，一切都很好。