Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS to set all textboxes in a page as readonly

Posted on 2012-08-20
29
Medium Priority
?
309 Views
Last Modified: 2012-09-13
I realized that I need to set all textboxes to readonly. It would take time to change controls to labels as there are really many.
What CSS should i add?
0
Comment
Question by:zachvaldez
  • 15
  • 8
  • 5
  • +1
29 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38313240
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" />
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 38313278
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38313673
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>

Open in new window


Cd&
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:zachvaldez
ID: 38347012
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...
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38347401
you can have a toggle button that changes the disabled attribute in the tag. Is that what you are asking for?
0
 

Author Comment

by:zachvaldez
ID: 38347410
that would probably help. thanks
0
 

Author Comment

by:zachvaldez
ID: 38347738
btw how do I implement the javascript above?
0
 

Author Comment

by:zachvaldez
ID: 38347779
nodevalue keyword is not recognize
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38347853
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&
0
 

Author Comment

by:zachvaldez
ID: 38350305
how to use HTML this javascript?
0
 

Author Comment

by:zachvaldez
ID: 38350433
what is the "textarea" in the code
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38351156
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>

Open in new window



Cd&
0
 

Author Comment

by:zachvaldez
ID: 38351202
I can take jquery solution if someone will show how?thanks
0
 

Author Comment

by:zachvaldez
ID: 38351213
onload=setRO;

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

Expert Comment

by:COBOLdinosaur
ID: 38351260
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&
0
 

Author Comment

by:zachvaldez
ID: 38351263
Or how would I use this in HTML code? thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38351281
You just put the code in the head of the page, and it will set the readonly when the page loads.


Cd&
0
 

Author Comment

by:zachvaldez
ID: 38351336
I have a masterpage. I don't think it should be there otherwise it will hit all.
0
 

Author Comment

by:zachvaldez
ID: 38351376
the textboxes are stil edtable
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38351392
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&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38351401
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.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 660 total points
ID: 38351426
there was still a small bug in it if you have to do it inline:

<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=true;
    }
}
</script>
                                            

Open in new window



Cd&
0
 

Author Comment

by:zachvaldez
ID: 38351456
the element is a table and the class = style1. Would that help to substitute these names in your code but code could look different.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38351475
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?
0
 

Author Comment

by:zachvaldez
ID: 38351480
Im using server side controls. ASP.Net controls Textboxes...
What is the 'input' element?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38351507
What is the 'input' element?

Are you joking?  Do you not know any HTML?

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38351521
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.
0
 

Author Comment

by:zachvaldez
ID: 38368438
will do that
0
 

Author Closing Comment

by:zachvaldez
ID: 38394835
Not the perfect solution but need more work to get it.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month15 days, 20 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question