HTML & Javascript - how to emulate disabled input (hide caret)?

Question

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

Answer 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;
};

Answer 2

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>