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

Discussion in 'HTML' started by OccasionalFlyer, Jul 17, 2013.

  1. 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
    OccasionalFlyer, Jul 17, 2013
    #1
    1. Advertising

  2. OccasionalFlyer

    JJ Guest

    On Tue, 16 Jul 2013 16:04:34 -0700 (PDT), OccasionalFlyer wrote:
    > 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>
    JJ, Jul 17, 2013
    #2
    1. Advertising

  3. Re: Setting style of textarea to not look editable and preventresizing.

    On Tue, 16 Jul 2013 16:04:34 -0700, OccasionalFlyer wrote:

    > 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";

    --
    Denis McMahon,
    Denis McMahon, Jul 17, 2013
    #3
  4. On Tuesday, July 16, 2013 4:04:34 PM UTC-7, OccasionalFlyer wrote:
    > 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
    OccasionalFlyer, Jul 17, 2013
    #4
  5. Re: Setting style of textarea to not look editable and preventresizing.

    On Wed, 17 Jul 2013 10:23:25 -0700, OccasionalFlyer wrote:

    > 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.

    --
    Denis McMahon,
    Denis McMahon, Jul 17, 2013
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. inhahe
    Replies:
    3
    Views:
    2,348
    Diez B. Roggisch
    Jan 28, 2005
  2. McMatt

    TextArea resizing

    McMatt, Feb 23, 2007, in forum: Java
    Replies:
    2
    Views:
    676
    Knute Johnson
    Feb 23, 2007
  3. Replies:
    4
    Views:
    169
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    348
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    197
    Proper
    Apr 18, 2009
Loading...

Share This Page