#детектив дня
Сегодня в чат пришёл подписчик с забавной проблемой.
Дано: форма с двумя полями, одно просто как HTML-тег, второе — React-компонент. Ну, очевидно, компонент тоже содержит поле ввода.
При нажатию на клавишу Ввод событие onSubmit не происходит, форма не отправляется. Хотя, вроде как, всем известно, что это — стандартное поведение.
Было замечено, что при удалении React-компонента всё отлично работает. И первым предположением стало, что React что-то испортил, или песочница кривая.
Кто-то догадался сделать ванильный пример, поведение сохранилось.
То есть, вот такое:
...просто-напросто не работает. Стали копать.
И докопались до спецификации 1995 года для HTML 2.0!
Вот она: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
И там написано следующее:
Перевожу: чёрным по белому сказано, что форма должна отправляться по кнопке submit (или специальной картинке, но то такое).
То есть, наше предположение о том, что форма всегда должна отправляться по нажатию Ввода — уже неверное.
Но, буквально, в следующем же абзаце:
Так-так-так, а что тут у нас? А тут написано, что единственное текстовое поле — это частный случай и нажатие клавиши ввода должно рассматриваться как отправка формы!
Удивительное рядом, короче. По всей видимости, такое поведение связано с обработкой событий focus и blur, когда полей больше одного.
Короче, так как же решить проблему и не добавлять кнопку?
Очень просто, вставить в форму следующее:
По-моему, пахнет лёгким бредом, но уж как есть.
И да, за много лет веб-разработки мне ни разу не понадобилась форма без кнопки, но расследование вышло забавным.
#html #form #submit
Сегодня в чат пришёл подписчик с забавной проблемой.
Дано: форма с двумя полями, одно просто как HTML-тег, второе — React-компонент. Ну, очевидно, компонент тоже содержит поле ввода.
При нажатию на клавишу Ввод событие onSubmit не происходит, форма не отправляется. Хотя, вроде как, всем известно, что это — стандартное поведение.
Было замечено, что при удалении React-компонента всё отлично работает. И первым предположением стало, что React что-то испортил, или песочница кривая.
Кто-то догадался сделать ванильный пример, поведение сохранилось.
То есть, вот такое:
<form onSubmit="alert('aha')">
<input type="text"/>
<input type="text"/>
</form>
...просто-напросто не работает. Стали копать.
И докопались до спецификации 1995 года для HTML 2.0!
Вот она: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
И там написано следующее:
When the user indicates that the form should be submitted (using a submit button or image input), the form data set is processed according to its method, action URI and enctype.
Перевожу: чёрным по белому сказано, что форма должна отправляться по кнопке submit (или специальной картинке, но то такое).
То есть, наше предположение о том, что форма всегда должна отправляться по нажатию Ввода — уже неверное.
Но, буквально, в следующем же абзаце:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
Так-так-так, а что тут у нас? А тут написано, что единственное текстовое поле — это частный случай и нажатие клавиши ввода должно рассматриваться как отправка формы!
Удивительное рядом, короче. По всей видимости, такое поведение связано с обработкой событий focus и blur, когда полей больше одного.
Короче, так как же решить проблему и не добавлять кнопку?
Очень просто, вставить в форму следующее:
<input type="submit" hidden/>
По-моему, пахнет лёгким бредом, но уж как есть.
И да, за много лет веб-разработки мне ни разу не понадобилась форма без кнопки, но расследование вышло забавным.
#html #form #submit
🤩30👍23❤4👎1