Input readonly backspace issue

Question

In my input element, when I navigate to the element and enter the backspace key using keyboard, it navigates to the previous page, when I set the input is readonly.

My code is below. Please share your knowledge.

<div class="div1">
    <label class="div1" for="inputfor">cash:</label>
    <input type="text" id="cashinput" readonly="readonly" />
</div>

Answer 1

I know that this question was asked 2 years back. Since I have a solution that worked for me, I am tempted to share it with everyone.

The fix is quite simple:

<input type="text" onkeydown="event.preventDefault()" readonly="readonly"/>

The event.preventDefault() will stop the backspace from navigating away from the page and you can also select and copy the text.

Thanks.

Answer 2

You could always just keep the input field readonly disallow input altogether.

<div class="div1">
    <label class="div1" for="inputfor">cash:</label>
    <input type="text" id="cashinput" onkeydown="return false;" readonly="readonly"/>
</div>​​​​​​​​​​​​​​​