Internet Explorer 8: How to make read only text input have no cursor
I am trying to simulate the look and feel of a Firefox disabled text input: textarea and input text.
The only browser compatibility I have to worry about is Internet Explorer 8. I do NOT have to worry about anything earlier (Intranet)
Internet Explorer does not allow one to change the text color of a disabled test input. It does allow background color to be changed but gray text on a gray background color was beyond illegible.
I have an input box and text area declared as follows:
<input name="Count" id="Count" onfocus="this.blur()" type="text" readOnly="readonly" value="0"/>
<textarea name="Notes" id="Notes" style="width: 100%;" onfocus="this.blur()" rows="10" cols="20" readOnly="readonly"/>
I have the following styles applied through a CSS:
input[readonly], textarea[readonly] {
color:black !important;
background-color: threedface !important;
}
Visually, this works excellently in both Firefox and IE. However, IE still allows a cursor into the text area or text box. What am I missing?
ADDITION
By cursor, I am referring to a keyboard cursor such as when you are typing a reply here.
Maybe my problem is better stated as a user can still click on the text area and have a keyboard cursor show开发者_C百科 up. It appears that the blinking cursor disappears quickly though.
try adding a cursor property to your css
input[readonly], textarea[readonly] {
color:black !important;
cursor: default;
background-color: threedface !important;
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default
--- 12/01/27
Revisiting this solution, I found the following to work for me, hopefully its helpful to you as well:
Use this simple jQuery function in script tag for all readonly input fields. You can even use any specific ID or Class if you need for a particular item only.
$('input[readonly]').focus(function(){
this.select();
});
Can you use disabled=disabled
instead of readonly=readonly
?
精彩评论