|
Сообщение от ureech
|
|
Но нужно подстраховаться,если юзер введёт значение в текстовой инпут,а радио не отметит. Как можно это сделать?
|
Хороший UX предполагает наличие <label>, а значит нажатие на текст тоже выделяет определённую радио-кнопку.
|
Сообщение от ureech
|
|
сли юзер введёт значение в текстовой инпут,а радио не отметит. Как можно это сделать? Как отметить радио у конкретного инпута?
|
Это должно происходить автоматический...
<form>
<fieldset>
<legend>fruit</legend>
<label><input type="radio" name="fruit" value="apple">apple</label>
<label><input type="radio" name="fruit" value="orange">orange</label>
<label><input type="radio" name="fruit" value=""><input></label>
</fieldset>
</form>
<script><!-- нужен только один скрипт для обработки всех радио-кнопок форм с редактируемым значением -->
for(const input of document.querySelectorAll("label input[type=radio] ~ input")) {
const radioButton = input.closest("label").querySelector("input[type=radio]");
input.addEventListener("focus", event => {
radioButton.checked = true;
});
input.addEventListener("input", event => {
radioButton.value = input.value;
});
}
</script>
Как видите, вам не нужна дополнительная обработка текстового поля — вы выберите кнопку или введёте текст — значение хранится в параметре fruit, т. е. одинаковая обработка на сервере или в приложении.
