如何解决 chrome 自动与 vuetify 中的标签重叠的问题? [英] How fix issue with chrome auto complete overlap with labels in vuetify?

问题描述

当尝试在 Vutify 中创建带有 outlined 文本字段的登录表单时，chrome 自动完成与 labels 重叠，

When trying to create a login form with outlined text fields in Vutify, the chrome autocomplete overlap with labels,

<v-text-field
  v-model="email"
  label="e-mail"
  name="email"
  outlined
  prepend-icon="mdi-account"
  type="text"
  required
>
</v-text-field>

您可以重新创建这里请填写并提交，然后返回.

you can regeneare here please fill and submit, then go back.

推荐答案

好吧，我做的是这样的:

ok so what i did is something like this :

在输入上

:placeholder="!autofilled ? ' ' : ''"

在脚本中

data() {
        return {
            form: {
                email: '',
                password: '',
            },
            error: null,
            autofilled: false,
        };
},
watch: {
    'form.email'() {
        this.autofilled = true;
     },
},

它的作用:基本上将占位符设置为一个空格总是升高"；标签.不幸的一面是，静态设置它会使标签即使在填充后清空输入也无法返回.所以我所做的是使占位符动态化，并且只在占位符返回空之后对输入进行任何更改之前将其设置为空格.它并不完美，因为在用户保存密码之前的初始加载时，标签将被提升，但我还没有找到比这更好的东西.

What it does : basically setting placeholder to one blank space always "raises" the label. the unfortunate side is that setting it statically will make the label unable to go back down even if you empty the input after it is filled. so what i did is make the placeholder dynamic and only set it as a blank space before any change is made to the input after that placeholder goes back to nothing. it isnt perfect because on initial load before the user has a password saved the labels will be raised but i havent found anything much better than that.

这篇关于如何解决 chrome 自动与 vuetify 中的标签重叠的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！