Как добавить слушатель события onfocus в поле ввода, чтобы изменить стиль надписей - PullRequest
Новая
       21

Как добавить слушатель события onfocus в поле ввода, чтобы изменить стиль надписей

1 голос
/ 17 февраля 2020

Я пытаюсь заставить свои метки ввода изменить стиль на стиль .fancyclass, когда я использую onfocus в поле ввода. Мне было интересно, как бы я сделал это, используя прослушиватели событий в Javascript? 

            <fieldset name="in-fields">

                <section>
                    <label for ="inputname" class="name">Name*</label>
                    First: <br><input type="text" name="info" required><br/>
                    Last: <br><input type="text" name="info" required><br/>
                </section>

                <section>
                    <label for="inputnumber" class ="name">Phone Number*</label>
                    <input type="text" name="info" required>
                </section>

                <section>
                    <label for="inputemploy" class ="name">Current Employer</label>
                    <input type="text" name="info">
                </section>

                <section>
                    <label for="inputemail" class= "name">Email*</label>
                    <input type="email" name="info" required>  
                </section>

           </fieldset>

           .fancyclass {
           font-weight:bold;
           text-transform:uppercase;
           }

        document.querySelectorAll('input[name="info"]').forEach(item=> {
            item.addEventListener('focus', event => {
            console.log("add fancy class");
            })
        })

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

1 Ответ

0 голосов
/ 17 февраля 2020

не забудьте убрать свой класс на размытие тоже 

const myForm     = document.getElementById('my-form')
  ,   All_Labels = myForm['in-fields'].querySelectorAll('label')
  ;
myForm['in-fields'].querySelectorAll('input').forEach(inElm=>
  {
  inElm.onfocus=focusOn;
  inElm.onblur=focusOff;
  })
function focusOn(e)
  {
  let label_elm = e.target.parentNode.querySelector('label')
  All_Labels.forEach(lbl=>
    {
    if (lbl===label_elm)  { lbl.classList.add('fancyclass')    }
    else                  { lbl.classList.remove('fancyclass') }
    })
  }
function focusOff(e)
  {
  All_Labels.forEach(lbl=> lbl.classList.remove('fancyclass') ) 
  }
.fancyclass {
  font-weight:bold;
  text-transform:uppercase;
}
<form id="my-form">
  <fieldset name="in-fields">
    <section>
      <label class="name">Name*</label><br>
      First: <br><input type="text" name="First-Name" required><br>
      Last:  <br><input type="text" name="Last-Name"  required><br>
    </section>

    <section>
      <label class="name">Phone Number*</label>
      <input type="text" name="Phone-Number" required>
    </section>

    <section>
      <label class="name">Current Employer</label>
      <input type="text" name="Current-Employer">
    </section>

    <section>
      <label class="name">Email*</label>
      <input type="email" name="Email" required>  
    </section>

  </fieldset>
</form>
...