Textfield partially disabled

Discussion in 'Web Design and Development' started by SChaput, Nov 15, 2009.

  1. SChaput macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #1
    Is there such a way by either using JavaScript? Php? Or anything to make a textfield have an initial value, that is uneditable, but then have the user start typing after that. For instance, I'm asking users for information like "what did you do today" and I want thE answer formatted like, "today I.."_________" but instead of simply putting a label in front of thr textfield I'm trying yo accomplish the task mentioned above.

    Any help is appreciated
    thanks
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I'd either do,

    HTML:
    today I..<input type="text" />
    or
    HTML:
    <input type="text" value="today I.." disabled="disabled" /><input type="text" />
    and then use CSS to style appropriately. You can make the two text fields look like are one with CSS.
     
  3. splitpea macrumors 6502a

    Joined:
    Oct 21, 2009
    Location:
    Among the starlings
    #3
    Make an image with the words "today I..." and set it as the background to the textfield, with padding.

    However, that's not the most accessible option. Labelling the field is probably a better idea.
     
  4. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #4
    Thanks for both pieces of advice. What if i wanted the answer box to be a textfield with multiple columns and rows. Everything wouldn't line up as nicely as two text boxes or an image overlay.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    This wasn't too hard actually. Below is the HTML/CSS I used and an attached screen shot of what it looks like. Simply put, I absolutely positioned the label on top of the textarea and gave the textarea a text-indent so it couldn't use that first bit of area. Piece of cake.

    [Edit: Seems Mac Opera 10 ignores the text-indent. Not sure why. I haven't tested on IE. Works in Firefox and Safari though. Alternative is to create a padding-top: 1.3em for the textaras and forget about the text-indent, then the text would start below your starter text.]

    HTML:
    <form>
    <label for="msg" id="msg_l">today I ...</label>
    <textarea rows="5" cols="20" name="msg" id="msg"></textarea>
    </form>
    Code:
    form {
     position: relative;
    }
    #msg_l {
     position: absolute;
     left: 5px; top: 3px;
     color: #b66;
    }
    #msg {
     padding: .3em;
     text-indent: 5em;
    }
     

    Attached Files:

  6. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #6
    Thank you that worked perfectly.

    Thanks all of you for the suggestions.
     

Share This Page