HTML just cannot get focus instead of disabled

Question

Hello, I am currently trying to see if there is a way to not disable an input but not allow the input to get focus. I am doing this because I still need the backend to retrieve the data but just not allow the user to certain times to edit the input fields. Since disabled doesn't return data to the backend that doesn't work. The way I am currently doing it, is when the user presses submit I remove the disabled attribute however this makes them appear normal for a few seconds before the next page loads. Any suggestions would be great (my next step is going to be adding the

background-color: #F2F2F2 !important;
color: #C6C6C6;
border-color: #ddd;

But since each browser does it differently I would prefer a solution that doesn't do this.

Answer 1

Disable the input and add another input type=Hidden with the same name

Answer 2

Just intercept the onfocus event and send a blur() event, that way, if anyone focuses on it, the input is immediately unfocused.

​document.getElementById('input').onfocus = function() { this.blur(); }​​​​​

Here's an example
http://jsfiddle.net/HkbTH/

Answer 3

Consider using readonly, which is meant for exactly this sort of thing.

<input type="text" name="foo" readonly>
<input type="text" name="foo" readonly="readonly"/> <!-- XHTML syntax -->

document.getElementsByName('foo')[0].readonly= true;

A readonly field can be focused so the user can still eg. select and copy text out of it. But it can't be edited, and the rendering may look semi-disabled.