How to prevent a user from typing in an input field

[noahgelman]

I want to prevent a user from typing into an input field. The content is being generated when the user clicks an option. I want want to use disabled=”disabled” and styling it so it looks normal because different browsers are still rendering it differently. I also don’t want to put a div on top to prevent the clicking because that doesn’t seem to semantic. Any other way of doing it? Or am I stuck with the div and some event.stopPropagation?

[rickylamerz]

Found a solution.

Use:

And jQuery / Javascript

$(document).ready(function(){

$('.noChange').focus(function(){

$('.noChange').blur();

});

});

[yoboubdir]

i think the best way, it’s to use disabled=”disabled” property and css.

input[disabled="disabled"]  {

background-color: #808080;

}

[noahgelman]

@rickylamerz , thanks, that works great.

@yoboubdir, that wouldn’t work. I can’t just style a disabled input since it would still look different across browsers. IE specifically.

[ultimatepe]

I use:

Seems to work just as well but requires no jQuery and is much shorter. I haven’t tested it on multiple browser versions though so could fall down on some. I do know that on latest versions of FF it stops the user clicking the input at all, on IE 8 it allows the user to click into the input but the immediately stops them from typing anything.

[TT_Mark]

Sorry, I know this question is old, but what on earth is wrong with the ‘readonly’ HTML attribute?

[noahgelman]

@ultimatepe, not sure why I didn’t think of that, that sounds like it would work just fine, I’ll test it out eventually. I’m much further in the project and a bit swamped so it’ll have to be at another time.

@TT_Mark, I forget if I tried that, since it was a while ago, if I did try it and didn’t stick with it, it might have been because IE styles a field with a readonly attribute like it does with one with a disabled attribute and the browser default style was overriding mine.

I might be wrong though.

[Author]

Posts