Event on a disabled input
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.
I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:
<div style="display:inline-block; position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
jq:
$("div > div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});
Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop
instead of attr
).
OnClick Event on a disabled input
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>
jQuery click event on disabled input field
You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.
$("div").click(function (evt) {
// do something
});
One more alternate is to make the element readonly
instead of disabled
, but bear in mind that jQuery does not have a default :readonly
selector.
Angular 2 - Handle click on disabled input
Disabled elements don't fire mouse events. Most browsers will
propagate an event originating from the disabled element up the DOM
tree, so event handlers could be placed on container elements.
But you can achieve it by this way :
Component Side:
disableTextbox = false;
toggleDisable() {
this.disableTextbox = !this.disableTextbox;
}
Template side :
<div (click)='toggleDisable()'>
<input [disabled]='disableTextbox' >
</div>
WORKING DEMO
Clicking a disabled input or button
There is no way to capture a click on disabled elements. Your best bet is to react to a specific class
on the element.
HTML Markup:
<input type="button" class="disabled" value="click" />
JavaScript code:
$('input').click(function (event) {
if ($(this).hasClass('disabled')) {
alert('CLICKED, BUT DISABLED!!');
} else {
alert('Not disabled. =)');
}
});
You could then use CSS styling to simulate a disabled look:
.disabled
{
background-color: #DDD;
color: #999;
}
Here's a jsFiddle demonstrating its use.
Angularjs : enabled ng-click on disabled input
make a wrapper and bind ng-click on it. i.e.
<div ng-click='ur_Function()'>
<input type="text" ng-model="myModel" ng-disabled="true" />
</div>
U can check in your function whether input enabled is true or false and perform accordingly
Listen for blank inputs and add a disabled attribute to a button until an input is noticed
Check this one as well.
function checkvalid(el)
{
//e.g i am preventing user here to input only upto 5 characters
//you can put your own validation logic here
if(el.value.length===0 || el.value.length>5)
document.getElementById("mapOneSubmit").setAttribute("disabled","disabled");
else
document.getElementById("mapOneSubmit").removeAttribute('disabled');
}
<input type='text' id ='inp' onkeyup='checkvalid(this)'>
<button id='mapOneSubmit' disabled>
Submit
</button>
Related Topics
How to Append to Innerhtml Without Destroying Descendants' Event Listeners
How to Decode HTML Entities Using Jquery
Using an HTML Button to Call a JavaScript Function
How to Use Checkbox Inside Select Option
When Do Items in Html5 Local Storage Expire
Difference Between Relative Path and Absolute Path in JavaScript
How to Scroll to an Element Using JavaScript
How to Detect Keypresses in JavaScript
How to Escape a Single Quote ( ' ) in JavaScript
Which Browsers Support ≪Script Async="Async" /≫
In JavaScript How to Make a "Click" Event Fire Programmatically For a File Input Element
Set the Value of an Input Field
Get File Size, Image Width and Height Before Upload
Jquery Disable/Enable Submit Button
Are HTML Comments Inside Script Tags a Best Practice
Browser/Html Force Download of Image from Src="Data:Image/Jpeg;Base64..."