Группировка полей ввода в Javascript - PullRequest
Новая
       45

Группировка полей ввода в Javascript

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

Я пытаюсь сгруппировать свое имя / номер / поле электронной почты вместе, чтобы у меня был один прослушиватель событий. Я хочу, чтобы, когда пользователь покидает поле ввода, он воспроизводил звук. Я попытался добавить событие в родительский класс .infofield, но оно не работает для событий onblur / focus. Мне было интересно, как я подхожу к этому в Javascript? 

        <section class="infofield">
            <audio id="leave" src= "blur.mp3"></audio>

            <section>
                <p class ="name">Name*</p>
                First: <br><input type="text" name="fname" required><br/>
                Last: <br><input type="text" name="lname" required><br/>
            </section>

            <section>
                <p class ="name">Phone Number*</p>
                <input type="text" name="number" required>
            </section>

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

        </section>

1 Ответ

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

Трудностей не вижу, в чем проблема? 

const myForm = document.getElementById('my-form')
  ;
myForm.in_fields.querySelectorAll('input').forEach(inElm=>
  {
  inElm.onfocus=focusOn;
  inElm.onblur=focusOff;
  })
function focusOn(e)
  {
  WiGo.textContent = `evt focus on ${e.target.name}`  
  }
function focusOff(e)
  {
  WiGo.textContent = `evt blur on ${e.target.name}`  
  }  
  
/* previous version --------------------------------------------------
myForm.in_fields.onmouseover=e=>
  {
  WiGo.textContent = 'mouse is over Personal informations fields'
  }
myForm.in_fields.onmouseout=e=>
  {
  WiGo.textContent = 'mouse is out of Personal informations fields'
  }
----------------------------------------------------------------------*/  
#my-form{
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
fieldset {
  width:22em;
  padding: 0 1em;
}
legend::before,
legend::after {
   content: '\00a0'
}
label,input {
  float: left;
  margin: .4em;
}
input {
  width:11em ;
  padding: .2em;
  border-width: 1px;
  padding: .3em 5px;
}
label {
  display: block;
  clear: both;
  width: 9em;
  text-align: right;
  line-height: 1.5em;
}
label::after {
   content: '* :'
}
<form id="my-form">

  <!--audio id="leave" src= "blur.mp3"></audio -->

  <fieldset name="in_fields">
    <legend>Personal informations</legend>

    <label> First Name</label>
    <input type="text" name="fname" required>

    <label>Last Name</label>
    <input type="text" name="lname" required>

    <label>Phone Number</label>
    <input type="text" name="number" required>

    <label>Email</label>
    <input type="email" name="email" required>  
  </fieldset>

  <p id="WiGo" >What's going on ?</p>

</form>
...