Выберите переключатель на ввод текста

Question

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

У меня есть эта форма с 3 радиокнопками, они позволяют пользователям выбирать размер, последняя радиокнопка предназначена для нестандартного размера (ширина и высота). Под последним переключателем есть текстовый ввод для ввода пользовательских высоты и ширины.

<form action="#" method="post">
   <label for="original-size">Original
       <input type="radio" id="original_size" name="size" value="original" checked="checked">
   </label>
   <label for="medium-size">Medium
        <input type="radio" id="medium-size" name="size" value="medium">
    </label>                   

   <label for="custom-size">Custom
         <input type="radio" id="custom-size" name="size" value="custom">
   </label>

        <input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
         <label for="custom-width">custom width</label>
           and 
          <input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
          <label for="custom-height">custom height</label>
          <br>
          <button name="submit" type="submit">Submit</button>
          </form>

Как выбрать радиовход нестандартного размера, если пользователь нажимает на ввод текста нестандартной ширины или нестандартной высоты? Есть ли опция без скрипта java, если нет, маленький код скрипта java будет в порядке (я не использую jQuery)?

Answer 1

Удалось выкопать это, это то, что вы ищете?

<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>

<div id="customWrapper">
  <p>Custom: <input type="radio" id="customSize"></p>
  <p>Custom Width: <input type="text"></p> 
  <p>Custom Height: <input type="text"> </p> 
</div>
</form>

const div = document.getElementById('customWrapper');

// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
  document.getElementById('customSize').checked = true;   
}, true);

// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
  document.getElementById('customSize').checked = false;    
}, true);

https://jsfiddle.net/mLvt9ubz/

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