Я снял видео по этой проблеме, используя расширение Google Chrome, но не заплатив за него, единственным форматом, который я мог загрузить, был .webm, поэтому я поделюсь ссылкой на него на моем OneDrive, за исключением того, что его нужно загрузить.Потоковая передача невозможна.
Неправильная форма ввода при использовании автозаполнения
Вот кодовое перо с сокращенной версией кода для формы в видео.Белый текст поможет легче определить исходный код, потому что он выделяется среди других цветов и менее белый.
Код формы ввода Pen
Вы увидитев видео, как, когда я начинаю вводить свое имя, если я использую автозаполнение, нажимая на то, что появляется ... Курсор просто ломается и быстро переключается между всеми входами, которые он заполнил.Скажем, я уже заполнил 2 из 5 входов и затем нажал Автозаполнение, только остальные 3 из 5 пошли бы не так, кажется, что это пошло не так при заполненных полях ввода.Я могу сделать это ТОЛЬКО, если открою или перейду на другую вкладку вверху, а затем вернусь на вкладку формы.Тогда это сделано.Кроме того, странно то, что переключатели и выпадающие списки, которые обычно работают, функционируют по-разному в этот период "удара".Выпадающие меню, которые я даже не могу выпустить, и переключатели работают, только если дважды щелкнуть мышью, что вы можете увидеть в видео.
Я не уверен, что делать, это должно появиться через несколько дней, и этотакая огромная сделка, которую я пытался исправить в течение нескольких месяцев.Опубликовано в Discord rooms и GitHub.Я полностью в замешательстве.
Было бы здорово, если бы я мог отключить автозаполнение, потому что несколько волонтеров будут использовать эту форму из одного места, а Google Chrome не сможет хранить свою информацию.Но все стековые потоки с сотнями ответов и комментариев либо не работают, либо в значительной степени утверждают, что 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>