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.
-
1Aqui não tenho esse comportamento... Qual é o Browser e o Sistema operacional que vc está tendo esse problema?– hugocslCommented 30/07/2019 às 13:20
-
Windows, Google Chrome– Danielle RodriguesCommented 30/07/2019 às 13:21
-
Não meu não faz isso... Vc está usando trackpad ou um mouse convencional com rodinha?– hugocslCommented 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– Danielle RodriguesCommented 30/07/2019 às 13:27
-
se o foco estiver no dia, ou no mes, acontece neles tbm– Danielle RodriguesCommented 30/07/2019 às 13:36
|
Mostrar mais 4 comentários
2 Respostas
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);
})
-
1Desnecessário colocar um id no campo apenas para isso. Pode pegar pelo type.– SamCommented 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. Commented 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.– SamCommented 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 :). Commented 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. Commented 30/07/2019 às 15:22
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>
-
Poderia colocar um exemplo com JavaScript puro, porque não se sabe se a autora da pergunta usa jQuery.– SamCommented 30/07/2019 às 14:50
-