简体   繁体   中英

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 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 ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM