1

Eu estou tentando bloquear o click em um input

Html

<input id="txtData" class="form-control" /><span class="input-group-addon" data-role="data"><i class="glyphicon glyphicon-th"></i></span>

De forma que não aconteça nenhuma ação quando o input for clicado, já tentei o seguinte código e não obtive sucesso.

$('#txtData').click(function (event) {
    event.preventDefault();
    event.stopPropagation();
    return false;
});

*obs: já tentei com delegate e onclick também.

Eu tenho um datepicker acoplado no input, ele é acionado quando eu clico em outro lugar ($('#txtData').datepicker("show");), já procurei também propriedades do datepickere não tem nenhuma que deixe ele invisível ou algo do tipo, possivelmente o click aciona o datepicker antes de executar a minha função jquery, teria alguma forma de bloquear 100% o click, antes, durante e depois, alguma sugestão?

11
  • 2
    Tentou as propriedades disabled ou readonly do proprio HTML?
    – BrTkCa
    Commented 10/03/2017 às 17:13
  • Acabei de tentar, mudou o cursor como o campo estivesse bloqueado mesmo, mas continua abrindo o datepicker, que loucura.
    – Mathiasfc
    Commented 10/03/2017 às 17:15
  • Tentou remover o evento do click dela? Porque como você usa um datepicker nele, o datepicker vai anexar o evento click quando for carregado. Commented 10/03/2017 às 17:20
  • Mas eu preciso do datepicker nele, mas eu só quero acionar o datepicker a partir de outro lugar, ex: clicar em um botão na tela, abrir ele a partir de outro lugar já to conseguindo o problema é que não queria abrir ao clicar no input mesmo, se eu tiro o datepicker do input ai nada mais funciona e se eu coloco o datepicker no botão que eu quero ele abre todo desformatado. @AndréLuisMarmo
    – Mathiasfc
    Commented 10/03/2017 às 17:23
  • Você pode não atribuir o datepicker a ele, já que quer abrir em outro lugar, e no evento do datepicker de: onSelect, setar a data selecionada..
    – Aline
    Commented 10/03/2017 às 17:45

4 Respostas 4

1

É possível fazer o que você precisa apenas com CSS, essa propriedade garante que o elemento nunca vai ser alvo de eventos do mouse.

CSS FILE

#txtData {
 pointer-events: none;
}
2
  • Infelizmente não funcionou, continua abrindo o datepicker ao clicar no input.
    – Mathiasfc
    Commented 10/03/2017 às 17:48
  • Tem certeza que não há uma div ou algo por cima do input que abre o datePicker? Porque a menos que você esteja utilizando um browser antigo essa propriedade é pra funcionar. developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events
    – LuKs Sys
    Commented 10/03/2017 às 18:03
1

Testei aqui e funcionou, falta você testar ai, abraço!
https://jsfiddle.net/ccmq8eub/1/

  $("#txtDataBlocked").focus(function(){
      $("#txtDataBlocked").off("click");
      $('#txtData').datepicker("hide");
  });


  $("#txtDataBlocked").click(function(){
      return false;
      alert("Clicado!!");
      $('#txtData').datepicker("hide");
  });
1
  • +1 realmente, seu código funciona, mas talvez essa minha pergunta foi mal formulada, descobri que meu problema se encontrava em um plugin de data que eu estava usando e respondi a sua também, de qualquer forma, muito obrigado .
    – Mathiasfc
    Commented 21/03/2017 às 16:58
0

Bom, os códigos acima funcionam, mas já que o problema é abrir o datepicker, você pode alem disso desabilitar o próprio datepicker.

Acrescente

var tag = document.getElementByTagName('span');
tag.data-role = null;
0

"Disabled" pode te ajudar

<input disabled id="txtData" class="form-control" /><span class="input-group-addon" data-role="data"><i class="glyphicon glyphicon-th"></i></span>

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 .