开发者

Internet Explorer 8: How to make read only text input have no cursor

开发者 https://www.devze.com 2023-03-22 13:33 出处:网络
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

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?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号