Chrome 自动补全错误的输入答案

【问题标题】：Chrome autocompletes wrong inputChrome 自动补全错误的输入
【发布时间】：2019-12-20 20:43:27
【问题描述】：

我在 Chrome (75.0.3770.142) 上有一个奇怪的问题。我有带有表单的 vue 应用程序和两个不同名称的文本输入。当我尝试自动完成第一个时，它会填充第二个（并且第一个输入保持为空）。我无法从我的应用程序中复制它。

我的组件


    <template>
        <label class="wrapper" :data-error="validation && errors.first(name)" :class="{ error: errors && errors.first(name), label }">
            <span class="label" v-if="label">{{label}}</span>
            <div class="input" :class="{
                'input--search': type === 'search'
            }">
                <input
                    v-if="validation"
                    :aria-label="ariaLabel"
                    v-shortkey.focus="shortKey"
                    :disabled="disabled"
                    :type="type"
                    :class="classes"
                    :value="value"
                    :name="name"
                    :placeholder="placeholder"
                    @search="reset"
                    @input="update"
                    v-validate="validation"
                    :autocomplete="autocomplete"
                />
                <input
                    v-else
                    :aria-label="ariaLabel"
                    v-shortkey.focus="shortKey"
                    :disabled="disabled"
                    :type="type"
                    :class="classes"
                    :value="value"
                    :name="name"
                    :placeholder="placeholder"
                    @search="reset"
                    @input="update"
                    :autocomplete="autocomplete"
                />
                <Icon class="icon" v-if="iconName && !value" :name="iconName" />
            </div>
        </label>
    </template>

表格：


    <template>
        <form class="form" v-on:submit.prevent>
            <slot />
            <Input
                v-if="isLabel && displayLabel"
                class="label"
                ref="label"
                type="text"
                :label="$t('subscriptions.new.label-placeholder')"
                name="label"
                :validation="{ required: true }"
                :value="label"
                @input="onLabelChange"
            />
            <hr />
            <Terms
                v-if="!termsAccepted"
                :value="terms"
                @input="onTermsToggle"
            />
            <Button
                class="submit button-next"
                submit
                :disabled="nextDisabled"
                @click="next"
            >
                {{ $t('subscriptions.new.next') }}
            </Button>
        </form>
    </template>

和来自 Chrome 的屏幕 https://imgur.com/a/hMXVLYP

视频： https://imgur.com/a/gOwulXm

【问题讨论】：

标签： html forms google-chrome vue.js autocomplete

【解决方案1】：

我不熟悉 Vue，但您可以尝试将输入类型用作电话字段的电话字段，其属性如名称和自动完成，值为......

<input type="tel" name="phone" id="yourid" placeholder="+1-650-123-1234" autocomplete="tel">

没有为字段设置自动完成和不正确的输入类型可能是导致此行为的原因。希望这会有所帮助。

【讨论】：