如果 Javascript 输入和 select 框为空，如何检查页面加载

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>

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

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，它会在用户 returns 访问页面时预填充输入字段。这会导致标签恢复到其原始位置（在输入本身内）并且两个文本冲突的问题。

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

我试过以下方法：

创建了一个新方法：

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 步：将您的输入绑定到属性

<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
}

第二 - Class 切换

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

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

相反，您可以再次创建一个数据属性来存储 focused class:

的切换状态

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

第 2 步：将 class 动态分配给您的元素，如下所示：

<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://vuejs.org/v2/guide/forms.html#v-model-with-Components

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

如果 Javascript 输入和 select 框为空，如何检查页面加载

How to check on page load if input and select boxes are empty with Javascript

html

css

css-animations

vue.js

bootstrap-vue