Как можно настроить постоянное появление окна с просьбой сохранить пароль во всех браузерах?

У меня на форме установлено <code class="javascript">@submit.prevent="onSubmit"</code>, но после нажатия кнопки <code>submit</code> соответствующий prompt не появляется. В правом верхнем углу, если я ввел хотя бы один символ в поле для пароля, отображается иконка с ключом. Это означает, что сохранение данных возможно, но только вручную, если я это замечу и не забуду нажать. Как можно заставить prompt всё-таки отображаться? 

Вот так выглядит мой HTML-код: 
<pre><code class="html">&lt;form data-v-c89950ba="" id="login" name="login" autocomplete="on" action=""&gt;
   &lt;input data-v-5f65b82d="" type="tel" name="phone" required="" placeholder="Телефон" autocomplete="tel" id="tel" 
      pattern="^(?&lt;code&gt;\+?\d{1,3})[\-\s]{0,}(?&lt;number&gt;\(?\d{3}\)?[\-\s]{0,}\d{3}[\-\s]{0,}\d{2}[\-\s]{0,}\d{2})$"&gt;
   &lt;input data-v-5f65b82d="" type="email" name="email" required="" placeholder="E-mail" autocomplete="username email" 
      id="email"&gt;
   &lt;input data-v-5f65b82d="" type="password" name="password" required="" placeholder="Пароль" maxlength="16" 
      minlength="8" autocomplete="current-password" id="current-password" pattern=".{8,16}"&gt;
   &lt;input data-v-58519816="" data-v-c89950ba="" type="submit" value="Войти"&gt;
&lt;/form&gt;
&lt;/code&gt;</pre>
  • 6 сентября 2024 г. 10:33
Ответы на вопрос 1
Чтобы окно с просьбой сохранить пароль отображалось автоматически во всех браузерах, нужно обеспечить правильное поведение браузера, которое подразумевает стандартную отправку формы. Когда вы используете `@submit.prevent` в Vue.js, это предотвращает стандартное поведение отправки формы, и, следовательно, браузер не сможет отобразить диалоговое окно с вопросом о сохранении пароля из-за отсутствия отправки данных на сервер.

Вот несколько рекомендаций для достижения желаемого поведения:

1. **Удаление `@submit.prevent`**: Попробуйте убрать `@submit.prevent` и просто использовать событие `submit`, чтобы форма отправлялась нормальным образом. Например:
   
   ```html
   <form id="login" name="login" autocomplete="on" action="ваша_адреса_для_отправки" method="POST">
       <input type="tel" name="phone" required placeholder="Телефон" autocomplete="tel" id="tel" pattern="^(?&lt;code&gt;\+?\d{1,3})[\-\s]{0,}(?&lt;number&gt;\(?\d{3}\)?[\-\s]{0,}\d{3}[\-\s]{0,}\d{2}[\-\s]{0,}\d{2})$">
       <input type="email" name="email" required placeholder="E-mail" autocomplete="username email" id="email">
       <input type="password" name="password" required placeholder="Пароль" maxlength="16" minlength="8" autocomplete="current-password" id="current-password" pattern=".{8,16}">
       <input type="submit" value="Войти">
   </form>
   ```

2. **Обработка отправки формы**: Если вам нужно выполнять какую-то логику перед отправкой формы, можно сделать это в обработчике события `submit`:

   ```html
   <form id="login" name="login" autocomplete="on" @submit="onSubmit">
       ...
   </form>
   ```

   И в вашем методе `onSubmit` добавьте следующие строки после выполнения нужной вам логики:

   ```javascript
   methods: {
       onSubmit(event) {
           // Ваша логика перед отправкой формы

           // Отправить форму, если всё в порядке
           event.target.submit();
       }
   }
   ```

3. **Правильные атрибуты autocomplete**: Убедитесь, что атрибуты `autocomplete` у полей формы установлены правильно. Для поля с паролем лучше использовать `autocomplete="new-password"` или `autocomplete="current-password"`, в зависимости от вашего случая использования. Убедитесь также, что все поля имеют соответствующие значения для `autocomplete`, чтобы максимально поддержать функционал автозаполнения в браузерах.

Важно помнить, что некоторые браузеры могут вести себя по-разному, особенно в зависимости от настроек пользователя и политики безопасности, но вышеуказанные изменения должны помочь значительно увеличить вероятность появления диалога для сохранения пароля.
Похожие вопросы