我使用Google Chrome扩展程序拍摄了有关此问题的视频，但无需付费，我可以下载的唯一格式是.webm，因此除非需要下载，否则我将在OneDrive上共享指向该链接的链接。无法流式传输。
Input Form Going Whack when Using AutoFill
这是一支电码笔，其中视频中的表格具有简化的代码版本。白色文本将帮助您更轻松地识别输入代码，因为它与其他颜色相比更加醒目，白色更少。
如果您通过单击出现的内容使用自动填充功能，您将在视频中看到如何开始输入我的名字...光标开始晃动，并在它填充的所有输入之间快速切换。假设我已经填写了5个输入中的2个，然后单击了“自动填充”，则只有5个其他3个会出现错误，似乎只填充了已填写的任何输入字段。仅当我打开或导航到顶部的另一个选项卡，然后返回到表单选项卡时，我才能使此停止。然后就完成了。还很奇怪的是，在此“崩溃”期间，正常工作的切换和下拉菜单的功能有所不同。下拉菜单我什至无法下拉菜单，只有双击时才能切换，这可以在视频中看到。
我不确定该怎么办，应该在几天内发布，这笔巨款我已经尝试修复了几个月。发表在Discord会议室和GitHub存储库上。我完全迷住了。
如果我可以关闭自动填充功能，那就太好了，因为多个志愿者将从一个位置使用此表单，并且Google Chrome无法存储其信息。但是，所有包含100个答案和评论的stackoverflows都不起作用，或者几乎所有状态都表明Google对此进行了覆盖。上线时必须使用更好的浏览器，而不要使用Chrome。但是我需要停止或修复此自动填充问题。
谢谢您的帮助。
<div id="donation-form" class="container">
<div v-if="form.isBusy" class="alert mx-auto mt-2 hvr-pulsate-constant whiteText text-center brand-secondary" style="width:200px;">
<i class="fas fa-spinner fa-pulse"></i><strong> LOADING...</strong>
</div>
<div v-else id="formContainer" v-cloak>
<form name="personForm" class="m-1" v-on:submit.prevent="onSubmit()" autocomplete="false" role="presentation">
<div class="form-group">
<div class="row">
<div class="col">
<div class="col">
<label class="control-label">Select Region:</label>
</div>
<div class="col">
<select v-model="donation.region"
class="form-control" :class="{ 'border-danger': errors.has('region')}"
name="region"
v-validate="'required'"
data-vv-as="Region">
<option disabled value="">Please select one</option>
<option>Pensacola/Panhandle</option>
<option>Big Bend</option>
<option>Northeast Florida</option>
<option>Central Florida</option>
<option>Space Coast</option>
<option>Greater Lakeland</option>
<option>Okeechobee/Treasure Coast</option>
<option>Sun Coast</option>
<option>Palm Beach</option>
<option>Broward County</option>
<option>Miami Dade</option>
</select>
<span class="text-danger" v-if="errors.has('region')">{{ errors.first('region') }}</span>
</div>
</div>
<div class="col">
<div class="col">
<label>Donation Received By:</label>
</div>
<div class="col">
<input placeholder="e.g. Staff Member/Volunteer"
v-model="donation.receivedBy"
v-on:focus="selectAll"
class="form-control" :class="{ 'border-danger': errors.has('receivedBy')}"
name="receivedBy"
type="text"
v-validate="{ 'required': true, 'min': 2 }"
data-vv-as="Received By Staff/Volunteer" />
<span class="text-danger" v-if="errors.has('receivedBy')">{{ errors.first('receivedBy') }}</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<div class="col">
@*<label class="control-label">{{ form.ifOrganization }}</label>
<label>{{ form.orgToggleMessage }}</label>*@
<transition name="slide-fade" mode="out-in">
<label v-if="donation.isOrganization" key="true" class="control-label">{{ form.ifOrganization }} {{ form.orgToggleMessage }}</label>
<label v-if="!donation.isOrganization" key="false" class="control-label">{{ form.ifOrganization }} {{ form.orgToggleMessage }}</label>
</transition>
</div>
<div class="col">
<label class="switch">
<input type="checkbox" v-model="donation.isOrganization" @@change="orgToggle" />
<span class="slider"></span>
</label>
</div>
</div>
<div class="col">
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
</div>
<div class="row">
<transition name="fade">
<template v-if="!donation.anonymous">
<div class="form-group col">
<div class="row">
<div class="col">
<div class="col">
<label class="control-label">Title:</label>
</div>
<div class="col">
<select class="form-control" v-model="donation.title">
<option v-for="title in form.titleDropDown.titles" :value="title.text">
{{ title.text }}
</option>
</select>
@*<select v-model="person.title" class="form-control" :class="{ 'border-danger': errors.has('title')}" name="title" v-validate="{ 'required': true }" data-vv-as="Title">*@
@*<select v-model="person.title"
class="form-control"
name="title">
<option disabled value="">Please select one</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
</select>*@
@*<span class="text-danger" v-if="errors.has('title')">{{ errors.first('title') }}</span>*@
</div>
</div>
<template v-if="donation.isOrganization">
<div class="col">
<div class="col">
<label class="control-label">Organization: </label>
</div>
<div class="col">
<input v-model="donation.organization"
v-on:focus="selectAll"
class="form-control" :class="{ 'border-danger': errors.has('organization')}"
placeholder="e.g. Children's Home Society"
name="organization"
v-validate="{ 'required': true, 'min': 3 }"
data-vv-as="Organization" />
<span class="text-danger" v-if="errors.has('organization')">{{ errors.first('organization') }}</span>
</div>
</div>
</template>
<template v-else>
<div class="col">
</div>
</template>
</div>
<div class="row mt-2">
<template v-if="donation.isOrganization">
<div class="col">
<div class="col">
<label class=" control-label">{{ form.firstName }}:</label>
</div>
<div class="col">
<input placeholder="e.g. Daniel"
v-model="donation.firstname"
v-on:focus="selectAll"
class="form-control" :class="{ 'border-danger': errors.has('firstName')}"
name="firstName"
type="text"
v-validate="{ 'required': true, 'min': 2 }"
data-vv-as="First Name" />
@*<span asp-validation-for="@Model.FirstName" class="validation"></span>*@
<span class="text-danger" v-if="errors.has('firstName')">{{ errors.first('firstName') }}</span>
</div>
</div>
<div class="col">
<div class="col">
<label class="control-label">{{ form.lastName }}:</label>
</div>
<div class="col">
<input placeholder="e.g. Jackson"
v-model="donation.lastname"
v-on:focus="selectAll"
class="form-control" :class="{ 'border-danger': errors.has('lastName')}"
name="lastName"
type="text"
v-validate="{ 'required': true, 'min': 4 }"
data-vv-as="Last Name" />
<span class="text-danger" v-if="errors.has('lastName')">{{ errors.first('lastName') }}</span>
</div>
</div>
</template>
</div>
</div>
</template>
</transition>
</div>
</form>
</div>