Текстовые поля ввода, не работающие с историей хромированного поля

Question

В обычном текстовом поле ввода я бы ожидал увидеть историю того, что я ввел в это поле в хром, дважды щелкнув по нему.

У нас есть некоторые поля, которые отображаются на странице с угловым JS. Однако у них никогда нет элементов истории, а двойной щелчок никогда не показывает никаких результатов.

В кратком тесте появляется, что добавление атрибута name не восстанавливает эту функциональность.

Это потому, что поле никогда официально не представлено через элемент формы? Если да, то как это можно обойти?

Все результаты, которые я смог найти в google для этой проблемы, относятся к обратному случаю, при этом «off» игнорируется.

Редактировать: вот пример. Я могу добавить значение в историю, если я отправлю запрос POST, но не в поле, которое не находится в форме и отправлено: https://jsfiddle.net/gtuzy4p2/2/

Здесь также есть ссылка на спецификацию, в которой подробно описывается использование атрибут, но не то, как значения должны быть сохранены браузером. https://html.spec.whatwg.org/multipage/forms.html#autofill

Answer 1

Как вы уже заметили, спецификация не указывает, как и когда браузеры должны автоматически запоминать значения формы. Это означает, что браузеры могут делать это так, как они хотят, и вы не можете полагаться на конкретное поведение. В этом случае Chrome и многие другие браузеры представляют форму как единственный ключ для сохранения входных значений.

Если вы хотите обеспечить определенное поведение, посмотрите на datalist element. Вот пример, скопирован из связанной вики-страницы:

<label>Choose a browser from this list: 
 
<input list="browsers" name="myBrowser" /></label> 
 
<datalist id="browsers"> 
 
    <option value="Chrome"> 
 
    <option value="Firefox"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
    <option value="Microsoft Edge"> 
 
</datalist>

Используя JavaScript, вы можете написать собственную логику для хранения ранее введенных значений в local storage, а затем динамически заполнить datalist с теми, значения при последующей загрузке страницы. Большинство (если не все) браузеры, поддерживающие datalist, также будут выполнять автозаполнение для своих элементов, а если нет, пользователи могут просто выбрать один из раскрывающегося списка.