Setting style of textarea to not look editable and prevent resizing.

[OccasionalFlyer]

I mostly program in an integrated environment that has its own set of page controls, like long/multi-line edit boxes. I want to display some static text. While I cannot really add my own control, I can create a custom style.. Iknow this is not alt.css (I looked to see if such a group existed but found none0. but I would like to ask what I can do for style that will
a) not make a textarea look more like static tex--no border that makes it look like the text could be edited
b) no way to resize the text area
c) read-only text

How might I specify a style for just this one element on a page? I'm somewhat familiar with CSS for seting fonts and colors but nothing like this. Thanks.

Ken

 

[JJ]

I mostly program in an integrated environment that has its own set of page controls, like long/multi-line edit boxes. I want to display some static text. While I cannot really add my own control, I can create a custom style. Iknow this is not alt.css (I looked to see if such a group existed but found none0. but I would like to ask what I can do for style that will
a) not make a textarea look more like static tex--no border that makes it look like the text could be edited
b) no way to resize the text area
c) read-only text

How might I specify a style for just this one element on a page? I'm somewhat familiar with CSS for seting fonts and colors but nothing like this. Thanks.

If TEXTAREA is a must, then I think this is the closest you can get.
In FF, it'll still show the text cursor if it's focused.
Chrome/ium doesn't seem to like scrollbars.

If it's still unacceptable, use PRE/DIV element instead, for a proper static
text container. Unless you need "something" from a TEXTAREA element.

<style>
..mytext {
outline:none;
border:none;
min-width:500px;
max-width:500px;
min-height:200px;
max-height:200px;
background:inherit;
}
</style>
<textarea readonly class="mytext">Some text</textarea>

 

[Denis McMahon]

c) read-only text

<textarea blah ..... readonly="readonly"></textarea>

Although I'd probably use <p id="some_id"></p> and then set the
textContent with document.getElementById("some_id").textContent =
"whatever you want here";

 

[OccasionalFlyer]

I mostly program in an integrated environment that has its own set of page controls, like long/multi-line edit boxes. I want to display some statictext. While I cannot really add my own control, I can create a custom style. Iknow this is not alt.css (I looked to see if such a group existed butfound none0. but I would like to ask what I can do for style that will

a) not make a textarea look more like static tex--no border that makes itlook like the text could be edited

b) no way to resize the text area

c) read-only text



How might I specify a style for just this one element on a page? I'm somewhat familiar with CSS for seting fonts and colors but nothing like this. Thanks.



Ken

Thanks Ed and Denis. On this piece,
Although I'd probably use <p id="some_id"></p> and then set the
textContent with document.getElementById("some_id").textContent =
"whatever you want here";

Unfortunately, in the unvironment I have to work in, JavaScript use is difficultbecuase it would have to interact with the PeopleSoft app server to figure out the value to use in determining what the text should be. So probably, I will need to feed whatever I want to insert as HTML or CSS to a variable that will put that text into an HTML block on the fly. Thanks.

Ken

 

[Denis McMahon]

Thanks Ed and Denis. On this piece,
Although I'd probably use <p id="some_id"></p> and then set the
textContent with document.getElementById("some_id").textContent =
"whatever you want here";

Unfortunately, in the unvironment I have to work in, JavaScript use is
difficultbecuase it would have to interact with the PeopleSoft app
server to figure out the value to use in determining what the text
should be. So probably, I will need to feed whatever I want to insert
as HTML or CSS to a variable that will put that text into an HTML block
on the fly. Thanks.

OK, but presumably whatever mechanism you're using to insert text into a
readonly textarea element can also be used to insert text into a
paragraph element?

Is there any real difference between either inserting content on the
client side:

document.getElementById("textarea_id").value = "whatever you want here";

and:

document.getElementById("p_id").textContent = "whatever you want here";

or in the server:

print("<textarea readonly='readonly'>" + text_content + "</textarea>");[1]

and:

print("<p>" + text_content + "</p>");

apart from the fact that one generates a readonly textarea that you need
to style to look like a normal paragraph with css, and the other is a
normal paragraph.

In other words, what I think we're saying here is that perhaps you should
take a step back and ask "why am I using a textarea instead of a p here?"

Getting the content into either is a trivial task. Using a p is much
easier than making a textarea into a p with css. If you are using the
textarea because you then want to input the text concerned as part of a
form submission, do not assume that making it readonly will prevent the
form being submitted with altered text, and it's absolutely imperative
that your security model doesn't rely on such an assumption - marking a
form element readonly does not guarantee that the content will be
returned unaltered when the form is submitted - if you want to guarantee
that data is persistent across a session, keep it server side in the
session data, don't pass it to the client. Doing so is a huge security
mistake - the client can alter anything you send to them regardless of
settings you send along with the form by using client side tools to alter
element attributes and content, including readonly, hidden and disabled
elements, and any combinations of those settings.

[1] replace "print();" and "+" with the relevant output and string
concatenation operators for the relevant server side application
language.