Как сделать так, чтобы HTML-форма оставалась постоянной после заполнения поля, но перед отправкой?

Контекст: Мне кажется, что заполнение формы на бумаге ручкой заставляет человека обращать больше внимания на то, что он пишет, и мне интересно, есть ли способ перенести это в html-форму.

Ожидаемое поведение: Человек нажимает на чекбокс, и он остается таким, пока он не перезагрузит страницу, и его нельзя "снять", или человек пишет предложение в текстовом поле, и после нажатия клавиши Enter (или Tab) поле нельзя редактировать.

Не обязательно вести себя именно так, любое предложение, близкое к этому, будет полезно. Это может быть на HTML, Js, Python (для Django) или что-то еще, просто интересно, есть ли "простой" способ или это будет отдельный проект на всем протяжении.

Пробовал искать в google, но не нашел ничего близкого к этому.

Вы можете использовать обработчик события focusout, чтобы сделать то, что вы хотите.

И как сказал Абдул Азиз Баркат в комментариях, вам нужно включить их перед отправкой формы, в противном случае они не будут включены в запрос.

Вы также можете использовать атрибут readOnly вместо disabled, чтобы избежать этого дополнительного шага, но флажок не будет работать сам по себе при таком решении.

var inputs = document.querySelectorAll("input");
inputs.forEach(element => element.addEventListener("focusout", (e) => test(element)));
function test(element) {
    element.disabled=true;
}
<input type="text" placeholder="You have only one try, focus a little more name"/>
<input type="checkbox" />

Если у вас есть несколько форм с входами или типами входов, вы можете использовать queryselectorall для проверки входов в форме; на основе атрибутов и т.д.

Затем вы можете сделать следующее:

var inputs = document.querySelectorAll("#idOfForm>input");//Gets all the inputs inside a specific form
inputs.forEach(input=> input.addEventListener("focusout", (e) => focusOrDisable(input)));
function focusOrDisable(inputElement) {
    if (inputElement.value.length > 0) {
        inputElement.disabled = true;//Disables the input if input is filled in
    } else {
        inputElement.focus();//Else focus on the input
    }
}

Это позволяет пользователю выбрать другой ввод с помощью мыши, табуляции или ввода, если ввод заполнен.

Вернуться на верх