0

What I need is a disabled input which would fire events. But since Firefox doesn't support that, I'd like to emulate it somehow.

Which basically means, disallow editing and hide caret. I don't care about appearance.

I've seen this CSS used: user-select: none; But that's not what I want - 1) user can still edit 2) I want it to be selectable.

I don't want the approach of overlaying really disabled input with a and catching it's events - it's not well portable.

Related: Event on a disabled input

Community
  • 1
  • 1
Ondra Žižka
  • 43,948
  • 41
  • 217
  • 277

2 Answers2

1

You can basically cancel every keydown event on the input. However this would still show the carret:

<input type="text" id="disabled_input" />

jQuery:

$('disabled_input').keydown(function (event) {
    event.preventDefault();
    event.stopPropagation();
    // or simply return false;
});

Javascript:

document.getElementById('disabled_input').onkeydown = function (event) {
    event.preventDefault();
    event.stopPropagation();
    // or simply return false;
};
Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
1

Why don't you wrap it in another element and place the event handler on that element?

For instance

<div class="disabledwrapper">
    <input type="text" disabled="disabled" name="test" value="test" />
</div>
Ben McCormick
  • 25,260
  • 12
  • 52
  • 71
  • Because Firefox doesn't send click events. They are not fired at all, nowhere in DOM. And I need click event to e.g. navigate to a URL contained in the input. – Ondra Žižka Jan 07 '13 at 16:21