1

Tenho um campo input date, quando mudo a data e continuo com o foco no campo, se usar o scroll, a data muda. Preciso desabilitar esse scroll quando o campo tiver selecionado.

9
  • 1
    Aqui não tenho esse comportamento... Qual é o Browser e o Sistema operacional que vc está tendo esse problema?
    – hugocsl
    30/07/2019 às 13:20
  • Windows, Google Chrome 30/07/2019 às 13:21
  • Não meu não faz isso... Vc está usando trackpad ou um mouse convencional com rodinha?
    – hugocsl
    30/07/2019 às 13:24
  • link neste exemplo mesmo da para ver, se voce selecionar o ano, por exemplo, e usar o scroll do mouse, o ano vai mudar estou usando um mouse convencional com rodinha 30/07/2019 às 13:27
  • se o foco estiver no dia, ou no mes, acontece neles tbm 30/07/2019 às 13:36

2 Respostas 2

1

Bom, você pode desativar o padrão de entrada do campo input="date" com JavaScript, por exemplo.

let campoInput = window.document.querySelectorAll("input[type=date]");
for(let i = 0; i < campoInput.length; i++){
  campoInput[i].addEventListener("wheel", function(event)
  {
     event.preventDefault();
  })
}
label {display: block;margin-top:10px}
<label for="campo1">Campo 1</label>
<input type="date" name="" id="campo1">
<label for="campo2">Campo 2</label>
<input type="date" name="" id="campo2">
<label for="campo3">Campo 3</label>
<input type="date" name="" id="campo3">

No trecho de código em cima temos uma variável campoInput que seleciona todos os input tipo date e os coloca em um array e nele é adicionado um evento com o addEventListener e o evento é wheel que é disparado quando a roda do mouse é rolada. E depois chamará uma função anônima desativando o padrão de entrada do campo input="date" que é rolar o scroll do mouse e alterar a data.

Uma forma melhor de fazer esse script é com o laço for each, porém, não suportado em alguns navegadores como o IE. Segue:

let campoInput = window.document.querySelectorAll("input[type=date]");

campoInput.forEach(input =>{
    input.addEventListener("wheel", function(event);
})
8
  • 1
    Desnecessário colocar um id no campo apenas para isso. Pode pegar pelo type.
    – Sam
    30/07/2019 às 14:55
  • Sim, também, mas o mais comum é você pegar por id ou class, mas também funciona e fica de opção. 30/07/2019 às 14:58
  • Acredito que um código mais enxuto seja melhor, menos bytes a serem carregados. Além do que, embora a autora cita "um campo" no título da pergunta, e nos comentários ela diz "todos os campos", ou seja, com id não dá pra fazer isso em mais de um campo, a não ser que ela coloque um id em cada campo, o que torna inviável fazer isso usando id. Mas tudo bem. Sua solução não é todo ruim, mas tb não é o ideal.
    – Sam
    30/07/2019 às 15:04
  • Bom, eu vim pela pergunta e não pelos comentários e na pergunta da autora estava aparentemente que o problema era em apenas em um único input e não em vários input. Então o erro não foi meu e sim da autora que fez a pergunta, pois eu respondi com clareza e resolvendo o problema da pergunta. E sim eu também concordo com você, como diz você "Acredito que um código mais enxuto seja melhor", mas esse código é apropriado sim a pergunta dela, mas não ao comentário dela :). 30/07/2019 às 15:16
  • Seria mais melhor então a autora editar a pergunta e colocar no plural e não no singular. 30/07/2019 às 15:22
0

Dá pra tentar resolver com javascript

$('#seuForm').on('focus', 'input[type=date]', function (e) {
  $(this).on('mousewheel.disableScroll', function (e) {
  e.preventDefault()
  })
})
*{font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;}
input[type=date] {display: block;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="seuform" action="/action_page.php">
  Teste: <input type="date" name="teste">
  Teste 2: <input type="date" name="teste2">
  Teste 4: <input type="date" name="teste3">
  Teste 5: <input type="date" name="teste4">
  <input type="submit">
</form>

2
  • Poderia colocar um exemplo com JavaScript puro, porque não se sabe se a autora da pergunta usa jQuery.
    – Sam
    30/07/2019 às 14:50
  • Sugiro explicar o que foi feito no código. 30/07/2019 às 14:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .