html - 如果使用 Javascript 输入和选择框为空，如何检查页面加载

Question

我正在使用 Vue.js 创建表单。目前我的 HTML 看起来像这样:

<div class="form-group m-0" role="group">
    <label class="d-block form-label" for="code_part3">Last Three</label>
    <div>
        <input class="form-input form-control is-invalid hasError" type="text"><!----><!----><!---->
    </div>
</div>

当用户关注输入或更改选择框时，一个类 (.focused) 将添加到主父级 (.form-group)。这使标签动画以位于输入/选择框的顶部。在模糊时运行一个方法来检查输入值是否为空。

resetAnimateInputLabel() {
  var target = event.currentTarget;
  var inputValue = event.currentTarget.value;
  var parentOfParent = target.parentElement.parentElement;
  if (inputValue == "") {
    //remove focused class to Parent of Parent to animate
    parentOfParent.classList.remove("focused");
  }
}

但是我使用的是 localStorage，它会在用户返回页面时预填充输入字段。这会导致标签恢复到其原始位置(在输入本身内)并且两个文本冲突的问题。

解决此问题的最佳方法是什么，以便在页面加载时，如果输入框或选择框为空，标签仍保持动画效果？

我尝试了以下方法:

创建了一个新方法:

checkInputEmpty() {
  var inputs = document.getElementsByClassName("form-input");

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value == "") {
      inputs[i].parentElement.parentElement.classList.remove("focused");
    } else {
      inputs[i].parentElement.parentElement.classList.add("focused");
    }
  }
}

并在这里调用它:

mounted() {

 this.checkInputEmpty();

 if (localStorage.email !== "undefined") {
   this.form.email = localStorage.email;
 }
}

Answer 1

你可以做两件不同的事情来以简单而优雅的方式处理这个问题:

首先 - 检查输入值:

第 1 步:具有用于存储输入值的数据属性

data () {
  return {
    inputValue: '',
  }
}

第 2 步:将您的输入绑定(bind)到该属性

<input v-model="inputValue" />

第 3 步:调查数据属性并根据需要(在任何需要的地方)处理这两种情况

if (this.inputValue) {
  // here, the input value is non-empty ("", null, undefined would evaluate to false)
} else {
  // here, the input value is empty
}

---

二级切换

第 1 步:您不必以这种复杂的方式设置和删除类:

inputs[i].parentElement.parentElement.classList.add("focused");

相反，您可以再次创建一个数据属性来存储 focused 类的切换状态:

data () {
  return {
    inputValue: '',
    formFocused: false
  }
}

第 2 步:像这样动态地将类分配给您的元素:

<div
  class="form-group m-0" role="group"
  :class="{ 'focused' : formFocused }"
>
 ...
</div>

第 3 步:并根据需要处理属性，在您的情况下可能是这样的:

if (this.inputValue) {
  this.formFocused = false;
} else {
  this.formFocused = true;
}

这与:

this.formFocused = !this.inputValue;

更多信息:

https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components

https://v2.vuejs.org/v2/guide/class-and-style.html