- Вопрос или проблема
- Какие условия должны быть выполнены, чтобы поле сохранилось?
- Ответ или решение
- Как заставить браузер сохранять содержимое поля для последующего использования?
- Условия для сохранения содержимого полей
- Использование Bookmarklet или Userscript
- Сравнение с расширением Form History Control (II)
Вопрос или проблема
Я использую Chrome. На некоторых сайтах, кажется, он запоминает огромное количество записей для разных полей. Я нахожу это очень удобным. Однако на некоторых сайтах он справляется не так хорошо. Один пример, который сводит меня с ума, — это консоль AWS. При обновлении функции Lambda мне нужно копировать файл из S3. Существует поле, которое требует очень длинный URL, который мне приходится каждый раз получать в другом месте.
HTML для поля такой:
<input type="text" autocomplete="on" id="awsui-textfield-5"
class="awsui-textfield awsui-textfield-type-text">
Из-за autocomplete="on" я ожидал, что Chrome просто “делает правильную вещь™”, но, возможно, потому что поле не в <form>, оно этого не делает.
Какие условия должны быть выполнены, чтобы поле сохранилось?
Я часто делаю закладки или пользовательские скрипты, чтобы решить мелкие неудобства с веб-сайтами. Я бы хотел сделать это здесь, но не знаю, что нужно изменить.
Пожалуйста, подскажите.
Я решил это для данного случая! Думаю, решение вероятно применимо и к многим другим. Я сделал закладку и кусок javascript, который вы можете вставить в консоль “Инструменты разработчика”.
var jq_tag=document.createElement('script');
jq_tag.setAttribute('src','//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js');
document.head.appendChild(jq_tag);
setTimeout(function() {
var tf=$(document.activeElement);
var ff=$('<form method="post" target="_blank" action="//example.com"><input type="submit" value="Save this field data"></form>');
tf.after(ff);
ff.prepend(tf);
}, 2000);
По задумке (чтобы сделать его более универсальным) требуется, чтобы ваш курсор находился в нужном текстовом поле. Когда вы запускаете JS, кнопка “Save this field data” появится после поля.
Вот поэтапное описание, что он делает строка за строкой:
# Создать тег скрипта в памяти.
# Сделать его источник jQuery.
# Присоединить его к <head> документа, что начинает его загрузку.
# Варварский обходной путь для ожидания, пока JS загрузится.
# Получить элемент, который в фокусе.
# Создать форму, которая будет отправлять POST на example.com в новой вкладке.
# Присоединить форму к DOM сразу после "элемента в фокусе".
# Отсоединить "элемент в фокусе" и присоединить его внутри нового элемента формы.
Вот это в действии…
Как это сравнивается с Form History Control (II)? https://chromewebstore.google.com/detail/form-history-control-ii/lpcccgcdjibejkgiaeijbmkpbnbkglkb
Ответ или решение
Как заставить браузер сохранять содержимое поля для последующего использования?
В вашем случае с консолью AWS, в частности с полем URL-адреса для функции Lambda, вы столкнулись с проблемой, когда браузер Chrome по какой-то причине не сохраняет значения, вводимые в поле ввода, несмотря на наличие атрибута autocomplete="on". Это может происходить из-за того, что поле не находится внутри тега <form> или других особенностей работы сайта, например, динамической загрузки содержимого.
Условия для сохранения содержимого полей
Для того чтобы Chrome автоматически сохранял содержимое полей формы, необходимо выполнение ряда условий:
- Атрибут
autocomplete: Поля ввода должны иметь атрибутautocomplete="on", что указывает браузеру на то, что содержимое должно быть сохранено для автозаполнения. - Тег
<form>: Поле должно быть частью формы<form>, так чтобы браузер воспринимал это как единый блок для автозаполнения. - Уникальные имена полей: Имя (name) поля должно быть уникальным в пределах страницы или формы, это помогает браузеру идентифицировать поле для автозаполнения на других страницах.
Использование Bookmarklet или Userscript
Ваше решение с использованием bookmarklet, который динамически добавляет форму вокруг поля ввода, является интересным и креативным решением. Этот подход позволяет обойти ограничения текущего HTML-кода. Основные шаги этого процесса включают:
- Загрузка jQuery для упрощённой работы с DOM.
- Выделение текущего активного элемента (в данном случае — поля ввода).
- Создание новой формы
<form>в HTML и добавление в неё текущего элемента ввода. - Добавление кнопки для сохранения данных поля, что позволяет крайне просто отправить содержание поля на сервер для последующего использования.
Сравнение с расширением Form History Control (II)
Расширение Form History Control (II) предоставляет более автоматизированный и интегрированный подход к сохранению данных форм. Оно отслеживает историю всех изменений в формах, предлагая пользователю возможность просматривать, изменять или восстанавливать предыдущие вводы. Это отличается от вашего подхода, ориентированного на ручное вмешательство и конкретные случаи, в которых существует необходимость изменения текущей структуры сайта.
В вашем случае использование как кастомных скриптов, так и расширений может быть полезным, в зависимости от частоты использования конкретного поля и ваших предпочтений в плане удобства и автоматизации.
Подводя итог, можно сказать, что возможность и удобство сохранения данных могут быть значительно расширены с использованием грамотных инструментов, как сторонних расширений, так и креативных пользовательских скриптов.