How to block the click on an input

1

I'm trying to block the click on a input

Html

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

So that no action happens when input is clicked, I tried the following code and I did not succeed.

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

* obs: I already tried with delegate and onclick too.

I have datepicker bounded in input , it fires when I click somewhere else ( $('#txtData').datepicker("show"); ), I've also searched for properties of datepicker and have none that leave it invisible or something like , possibly click on datepicker before executing my jquery function, would you have any way to block 100% click, before, during and after, any suggestions?

    
asked by anonymous 10.03.2017 / 18:11

4 answers

1

I tested it here and it worked, you're missing the test, hugs!
link

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


  $("#txtDataBlocked").click(function(){
      return false;
      alert("Clicado!!");
      $('#txtData').datepicker("hide");
  });
    
21.03.2017 / 15:51
0

Well, the above codes work, but since the problem is to open datepicker , you can also disable datepicker itself.

Add

var tag = document.getElementByTagName('span');
tag.data-role = null;
    
10.03.2017 / 18:22
0

You can do what you need with just CSS, this property ensures that the element will never be the target of mouse events.

CSS FILE

#txtData {
 pointer-events: none;
}
    
10.03.2017 / 18:46
0

"Disabled" can help you

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