SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist achintya's Avatar
    Join Date
    Apr 2005
    Location
    Chandannagar(India)
    Posts
    459
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Partially lock textarea content

    Hi Guys

    I am facing a complicated issue of partially locking content on textarea type fields. So far I have searched a lot in Google but nothing seems to have happened as I haven't found any help what so ever. Following is what client wants:

    I want to have some of pre-populated contents to be uneditable by the user and only they can add there own contents in the html templates.

    Is that really possible to do this using javascript/jquery library ?

    If someone knows anything about this,please let me know.

    Thanks in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    what do you mean by partially?
    You can make a text field uneditable like this: <input type="text" readonly="readonly" />
    And a tet area like this: <textarea rows="4" cols="50" readonly="readonly"></textarea>
    But I'm guessing you already knew that, right?

  3. #3
    SitePoint Evangelist achintya's Avatar
    Join Date
    Apr 2005
    Location
    Chandannagar(India)
    Posts
    459
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo

    Thanks for your reply.

    I would like to do something like this:

    I will pre-populate textarea with some contents which I need to non-editable but user can add their own with out deleting the pre-populated content.

    I think I have able to explain my requirement.

    Thanks again.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I suppose, if you really had to, you could place a background image onto the text area and put padding on the area covered by the image so no one can write on it.
    However, this is not a clean solution.

    What I would do if I was you is use a text field for the uneditable part and set the value to the desired text, e.g.:
    <input type='text' value='This text value is hardcoded or generated by a script and the user can't change it' >

    Then follow this by a normal text area:
    <textarea>type your text here</textarea>

  5. #5
    SitePoint Evangelist achintya's Avatar
    Join Date
    Apr 2005
    Location
    Chandannagar(India)
    Posts
    459
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo for another reply on this issue.

    The issue is that client would like the way I have mentioned above.

    He has already got flash editor which has this option so he is trying to get same here on the textarea.

    Anyway thanks for your reply once more.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Well, good luck with that.
    If you find a solution it would be nice if you could share it here.

  7. #7
    SitePoint Evangelist achintya's Avatar
    Join Date
    Apr 2005
    Location
    Chandannagar(India)
    Posts
    459
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I will of-course share if I find any solution to this.

    Thanks

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could use onkeyup to test if the first part of the textarea content matches what it is supposed to be and change it back if it isn't. That would mean that if they type a one character change into the 'read only' portion it would be immediately changed back and if they pasted something in place of part or all of it the part of what is pasted over the 'read only' section would be immediately changed back. It wouldn't prevent them making a change to the 'read only' portion but it would prevent that change from still being there when they enter another character.

    A simpler alternative is to display the fixed portion in a separate 'readonly' textarea immediately before the one they can edit and join the two fields together after the form has been submitted. For example the following displays two overlapping textareas so they look like one with the content of the first being readonly:

    Code:
    <style>
    .var {margin-top : -15px;border-top:none;}
    </style>
    
    <form>
    <fieldset><legend>Textarea with Fixed Text Portion</legend>
    <textarea readonly="readonly" cols="50" rows="2">This part of the textarea content is fixed and cannot be changed</textarea><br/>
    <textarea class="var" cols="50" rows="10">but the rest of the textarea content can be changed to whatever you want.</textarea>
    </fieldset>
    </form>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •