How to block the click on an input

Asked

Viewed 2,194 times

1

I’m trying to block the click on one 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 the input was clicked, already tried the following code and was unsuccessful.

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

*Obs: I’ve tried with delegate and onclick also.

I have a datepicker engaged in the input, it’s triggered when I click somewhere else ($('#txtData').datepicker("show");), I have also searched properties of datepickerand there’s none that makes him invisible or something like that, possibly the click triggers the datepicker before performing my function jquery, would have some way to block the click 100% before, during and after any suggestions?

javascript jquery html
  • 2

    Tried the properties disabled or readonly of the HTML itself?

  • I just tried, changed the cursor as the field was blocked even, but keeps opening the datepicker, how crazy.

  • Tried to remove the event from her click? Because as you use a datepicker on it, datepicker will attach the click event when it is loaded.

  • But I need the datepicker in it, but I just want to trigger the datepicker from somewhere else, eg: click a button on the screen, open it from somewhere else already getting the problem is that I did not want to open by clicking on the same input, If I take the datepicker from the input there is nothing else works and if I put the datepicker on the button I want it opens all deformed. @Andréluismarmo

  • You may not assign the datepicker to it, since you want to open elsewhere, and in the datepicker event of: onSelect, set the selected date..

  • I need to assign the datepicker to it because when selecting a date the date will be displayed in the input, and assigning the datepicker to a button for example it is completely deformed. @Aline

  • Can’t you elaborate a minimal, verifiable example to include in the question? Using Sopt’s HTML snippet can be a good one.

  • Yes, I am going to do that, at the moment I cannot, but as soon as I do I will supplement the question with a snippet. @Andersoncarloswoss

  • At first the disabled should work: see.

  • In datepicker you have an option: onSelect, just take the value and assign to inpt when the user selects.

  • Kd Bacco with XY problem link? : ) The problem seems q is to disable a button that activates Date Picker. You couldn’t suddenly hide it all with a:None display or visibility:Hidden from css and then give it a display:block or visibility:Visible when it had to appear?

Show 6 more comments

4 answers

1

It is possible to do what you need only with CSS, this property ensures that the element will never be targeted by mouse events.

CSS FILE

#txtData {
 pointer-events: none;
}

  • Unfortunately it didn’t work, keeps opening the datepicker by clicking on the input.

  • Are you sure there’s not a div or something above the input that opens the datepicker? Because unless you’re using an old browser this property is supposed to work. https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

1

I tested here and it worked, miss you test there, hug!
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 really, your code works, but maybe this my question was poorly formulated, I found out that my problem was in a date plugin that I was using and answered yours too, anyway, thank you very much .

0

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

Appendage

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

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>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.