Having an uneditable, but selectable textbox

Question

Hi, I'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.

So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.

Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)

Answer 1

What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.

Answer 2

Use JS:

<input type="text" readonly="readonly" onfocus="this.blur();" />

Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?

Answer 3

EDIT: Made swallowed tag visible. Now it makes sense.

this.blur() will make it impossible to select, I think.

<input type="text" readonly>

should help. Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).