Активация input type="date" при наведении

Question

<body>

  <label for="calendar" id="dater"> 
    Choose date before continue:  <input type="date" id="calendar">
</label>

  <script>
    document.getElementById('dater').addEventListener('mouseover', function() {
      document.getElementById('calendar').click();
    })
  </script>
</body>

Не нашел информации почему не срабатывает 'mouseover' при наведении на input[type="date"] при имитации его методом 'click()'?

Answer 1

Все срабатывает:

<label for="calendar" id="dater"> 
  Choose date before continue:  <input type="date" id="calendar" onclick="console.log('in onclick')">
</label>

<script>
  document.getElementById('dater').addEventListener('mouseover', function() {
    console.log('in mouseover');
    document.getElementById('calendar').click();
  })
</script>

Или Вам нужен фокус?

<label for="calendar" id="dater"> 
  Choose date before continue:  <input type="date" id="calendar" onfocus="console.log('in onfocus')">
</label>

<script>
  document.getElementById('dater').addEventListener('mouseover', function() {
    console.log('in mouseover');
    document.getElementById('calendar').focus();
  })
</script>

Answer 2

Потому что не click, а focus, но подсовывать пользователю такое поведение - это свинство.

document.getElementById('dater').addEventListener('mouseover', function() {
  document.getElementById('calendar').focus();
})

<label for="calendar" id="dater"> 
  Choose date before continue:  <input type="date" id="calendar">
</label>

БЛОГ НА HUSL

Активация input type="date" при наведении

Ответы (2 шт):