OnClick event on disabled input

Question

• I need to have an onclick event in the <input> that is disabled.
• Here onclick event is not working.
• Is there any other way to work with onclick event for disabled id based input?
• I tried the code below.
• input worked at first, but I needed to work the same as the second, as well as the first. (I need to call the Clicked function only on input ).
• thanks in advance.

My code is:

 function Clicked(event) { alert(event.id) } function ClickedDisabled(event) { alert(event.ids) } 

 <input type="text" id="ID" onclick="Clicked(this)" /> <input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled /> 

Answer 1

 function Clicked(event) { alert(event.id) } function ClickedDisabled(event) { alert(event.id) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <input type="text" id="ID" onclick="Clicked(this)" /> <span style="position:relative;"> <input type="text" id="IDs" disabled /> <div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div> </span> 

Try it, it can help you.

Answer 2

Placed

 input[disabled] {pointer-events:none} 

in your CSS (it prevents some browsers from completely discarding clicks on disabled inputs) and capturing a click on the parent element. This is a cleaner IMHO solution than overlaying a transparent overlay on an element to capture a click, and depending on the circumstances, it can also be much easier than just “mimicking” the disabled state using CSS (as this will not hurt, but also requires redefining the browser style, disabled by default.

If you have several of these buttons, for each of them you will need a unique parent element to be able to distinguish which button was pressed, because with pointer-events:none goal of the click is the parent button, not the button itself, (Or ​​you can check the coordinates of the click, I suppose ...).

If you need to support older browsers, check which of them support pointer-events : http://caniuse.com/#search=pointer-events