I was checking out a form I made on my iPad and it appears that adding disabled to a <button> tag doesn't actually disable the button.
Adding disabled to an <input> tag works but not <button>.
So
<input type = "text" disabled />
works, but
<button disabled>Hola</button>
doesn't. Thoughts on ways to fix this? Or is it just a safari bug?
You can use the disabled attribute on an <input /> tag but not a <button /> Tag. Button isn't officially depreciated but because you can do
<input type="submit" value="Click Me">
for form submission capabilities and
<input type="button" value="Click Me">
for a generic plain-old button there is no real point to having a whole different tag. Furthermore you can disable both a submit and a regular button by adding disabled
<input type="submit" value="You can't Click Me" disabled>
<input type="button" value="Click Me" disabled>
disabled is fine to use with <button> now.
This iOS Safari bug is terrible. Does the IPad support the blink tag? As far as I know you really can't style <input>'s like you can <button>'s. So if you have a <button> with <span>'s that are styled or <img>'s in side that button, <input> is not the way to go. Instead fake it, make your button behave like it has the attribute 'disabled'.
Add a class to your button:
<button class='ipad-disabled'></button>
Then check to see if that button has that class of 'ipad-disabled', If it does, nothing will happen when you click that button:
$('button').on('click', function () {
if (!$(this).hasClass('ipad-disabled')) {
doSomething(this);
}
});
Then when you need the <button> to be enabled remove the 'ipad-disabled' class:
$('button').removeClass('ipad-disabled');
I checked this on my residential iPad. You're right that the button tag doesn't work, but these do:
<input type="button" value="Go on, click me!">
and
<input type="submit" value="Go on, click me!">
I hope that solves your problem. Anything you can do with a <button></button>, you can do with an <input type="button"> or <input type="submit">. It must be an iOS Safari bug.
EDIT:
Button does accept disabled in Chrome, so I blame Safari on iOS.
EDIT:
See Fiddle.
<input type = 'button' /> but this seems like a rather simple feature to have in your browser. Ya know, being compliant with features that were established many many years ago.
<input type="button or submit" etc...> because, as you see, iOS Safari somehow manages to break it. I'll come back tommorow (EST) if you have any further issues/questions. Until then, good night!