CSS to set all textboxes in a page as readonly

textarea, input{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;          

}

or with html:

<input type="text" name="name" disabled="disabled" />

Unfortunately, I don't believe it's possible to do reliably through CSS since CSS only manages how things appear visually.  You could do it through javascript though...

There's a pretty good post on StackOverflow about this - http://stackoverflow.com/questions/2458595/disable-a-textbox-using-css

You really need to use javascript for this.  Something like:

<script type="text/javascript">

function setRO()
{
    TAs=document.getElementsByTagName('textarea');
    styleattr=document.createAttribute('readonly');
    styleattr.nodeValue='readonly';

    for (i=0;i<TAs.length;i++)
    {
        TAs[i].setAttributeNode(styleattr);
    }
}
onload=setRO;
</script>

Select allOpen in new window

Cd&

Is there any option other than changing the control to a label?
Id like to display the page with textboxes and possible an edit icon on the side that when clicked it changes the teextbox  property  to editable...

you can have a toggle button that changes the disabled attribute in the tag. Is that what you are asking for?

that would probably help. thanks

btw how do I implement the javascript above?

nodevalue keyword is not recognize

nodevalue keyword is not recognize

Ooops!

You can drop the line with the reference to nodeValue.  The readonly attribute is boolean and does not have a value node.

Cd&

how to use HTML this javascript?

what is the "textarea" in the code

Oh I read it wrong text inputs, not textareas... so:

<script type="text/javascript">

function setRO()
{
    TAs=document.getElementsByTagName('input');
    for (i=0;i<TAs.length;i++)
    {
        if (TAs[i].type=='text') TAs[i].readonly='readonly';
    }
}
onload=setRO;
</script>

Select allOpen in new window

Cd&

I can take jquery solution if someone will show how?thanks

onload=setRO;

Is this part of the jquery? How will I link this to the onload event of the page?

onload=setRO;  fires the function after the page is loaded.  If you fire before that you get errors.

As for jquery its only purpose is to show people how to avoid learning anything about how to code.  It is also useful for creating bloated, unmaintainable pages.

Cd&

Or how would I use this in HTML code? thanks

You just put the code in the head of the page, and it will set the readonly when the page loads.


Cd&

I have a masterpage. I don't think it should be there otherwise it will hit all.

the textboxes are stil edtable

I have no way of knowing how your pages are set up because you have no posted anything to indicate how they are coded.

If you cannot apply a simple script to an individual page then there is a real weakness in the architecture. However if you remove the onload, you can probably hack it by sticking the script in after the end of the the code generation for the form.  However It is beyond me why you are not doing it right by just generating the form with the readonly set on the server side instead of having to hack around on the client.

Cd&

what is the element of the textboxes you are referring to?

Also, you're not using tinymce or some other editor by any chance?

The best way we can help you is if you post a link to your page.

the element is a table and the class = style1. Would that help to substitute these names in your code but code could look different.

A table is not typically editable - there is something else that's making it editable.

Unless you mean "selectable", but that's a different thing...

why can't you just post a link?

Im using server side controls. ASP.Net controls Textboxes...
What is the 'input' element?

What is the 'input' element?

Are you joking?  Do you not know any HTML?

Cd&

You really need to brush up on some basic HTML knowledge. I can't imagine trying to develop a website without knowing basic HTML tags. It's not that hard, a couple of days max.

You need to do it.

will do that

Not the perfect solution but need more work to get it.