Блог

У меня есть приложение ReactJS, созданное с использованием пользовательского интерфейса Material.

Целевыми браузерами являются Chrome и Microsoft Edge, как последняя версия, так и две последние версии (всего 3 версии).

Чего я хочу добиться:

Отключите автозаполнение и автозаполнение для полей ввода текста.

Я долго искал, но не мог найти рабочего решения.

Что я пробовал до сих пор:

1. Автозаполнение={«выкл.»}
2. Автозаполнение={«false»}
3. Автозаполнение={«xyz»} так что автозаполнение с пользовательским значением
4. Автозаполнение =»новый пароль»> но это не работает в Edge
5. Реализация решения, которое добавляет атрибут HTML только для чтения к каждому полю ввода в начале, удаляет его при фокусировке и снова добавляет его в размытие текстового поля. Это не работает и, кроме того, приводит к дефекту, из-за которого переход к другому вводу текста с помощью табулятора на клавиатуре больше невозможен.

Для меня это не решение, заключать каждое поле в <form> элемент.

Рад видеть подход к решению этой проблемы.

Одним из возможных решений является установка уникального атрибута name для каждого времени <TextField> отображения. Например:

 <TextField
  {...textFieldProps}
  label={label}
  name={`${label}${Date()}`}
/>
  

Поведение автозаполнения и автозаполнения, на которое вы ссылаетесь, — это современные браузеры, пытающиеся быть «умными» и запоминать прошлые вводы пользователя, чтобы сэкономить им время. Возможно, вы заметили это поведение при просмотре веб-страниц, где один ввод текста «запоминает» ваш ввод с другого сайта. Когда это происходит, это происходит потому, что оба элемента имеют одинаковое значение для атрибута name . В вашем случае такое поведение «памяти» нежелательно.

Хотя это решение работает, Date при каждом рендеринге создается новый объект, который не идеален; однако Date он используется, поскольку обеспечивает уникальное имя вплоть до второго. Вероятно, есть пакеты, которые создают уникальные имена более эффективным способом.

Более подробно об автозаполнении можно прочитать здесь. Проблема в том, что автозаполнение — это опора пользовательского интерфейса, а автозаполнение — собственный атрибут html.

Возможное решение — создать пользовательский компонент, не использующий Material Ui, где у вас больше контроля. Таким образом, я уверен, вам удастся отключить автозаполнение между браузерами.

Microsoft Edge игнорирует параметр автозаполнения. Есть обходные пути, но они хакерские.

Итак, Microsoft Edge выполняет регулярное выражение в label> name, чтобы привязать ввод к автозаполнению. Из-за этого вы не можете использовать «стандартные» метки для этого.

Не зная всех шаблонов, которым он соответствует, я бы сказал, что самое простое решение — просто очистить его после автозаполнения. Если вы знаете шаблоны, вы можете избежать этого и создать пользовательское текстовое поле, чтобы избежать случаев автозаполнения Edge.

Что касается последнего пункта, это более сложное решение, но оно выполнимо с помощью логики. Вам нужно будет создать компонент-оболочку вокруг ваших полей ввода текста (TextField). Это проверяет, когда компонент сфокусирован, а затем удаляет реквизит только для чтения.