SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Bored One boredboi's Avatar
    Join Date
    Jul 2000
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to change the width of a text field as the user types?

    For example, i have a 120 px text field, but if the user types too much, the text field will expand so the entire text can be seen?

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This can be done fairly easily in MSIE (in a way that will not disturb Netscape -- it just won't expand the field in Netscape). For a cross-browser solution, you're getting into more complex issues of DHTML (which aren't really worth discussing for such a minor interface feature).

    Let me know if the MSIE-only (and Netscape 6, incidentally) solution is acceptable and I'll consider printing it in an upcoming Tech Times (unless someone beats me to it and posts the code here, in which case they'll get well-deserved karma).
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Would would you detect in the letter the user just typed id hidden in the text field?

    aDog

  4. #4
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Eh? Say again?
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  5. #5
    Bored One boredboi's Avatar
    Join Date
    Jul 2000
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup... it's fine by me...
    thanks.

    n btw, i think what mr. dog is trying to say is "could you detect the letter the user just typed in the text field?"

  6. #6
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    Reading back on my prior question, I don't even understand what I was saying. It must be that niquil...makes you feel real groggy. Anyway, I'll try to reword it to make more sense.

    Ok, I don't think the problem lies in expanding the text box--that can be done with javascript through a form or dHTML fairly easily (I think), but how do you detect when you need to expand the textbox. For example, let's say that the text box is there allowing big letters, and 5 letters fit in the textbox at once (in otherwords, all 5 letters are showing), but on the 6th letter, we want the textbox to expand, right? Well, without manually telling the computer when to expand the text box (after the 5th letter), how can we tell it to expand?

    See what I mean?

    aDog
    <Edited by Arielladog on 12-30-2000 at 12:26 PM>

  7. #7
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes I do see what you mean, and unfortunately the DOM provides no way of determining the actual pixel width of a text field's contents. You might have a shot at doing it if you coded the field entirely from scratch using DHTML, but that's just crazy.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  8. #8
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Yeah, that's what I am talking about. ALso, is the discrepency between how each browser interprets the "length" attribute of an input box. I've noticed there's a fairly wide discrepency there, and I have used the style="width:100px" property for IE before, but NN 4 just ignores that. And along with that, if I use the CSS width property with NS 4, it moves the textbox so that nothing can be on the same line.


    aDog
    <Edited by Arielladog on 12-30-2000 at 05:49 PM>

  9. #9
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just though of something. Can't you make layers "writeable" in IE 4+? If so, you could use something like that as a solution, but of course, it would only be IE 4+.

    aDog

  10. #10
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You'd be going crazy capturing keyboard events with a DIV and rewriting the contents of the DIV to reflect the changes. You'd have to handle everything with JavaScript, from the cursor to cut and paste. It just isn't worth it. Instead, consider providing little arrow buttons that allow the user to manually extend/contract the field size.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  11. #11
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I didn't mean that...what I meant by a writeable div was that isn't there an attribute for <div>'s that allows you to make it writeable (like a form element), where the user can type info into it? Maybe I'm just dreaming, though

    Doing the two arrows below a textfield to expand/contract is a good idea. I'll see what I can come up with that is if someone else doesn't beat me.

    aDog

  12. #12
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's some code I came up with (sorry it took so long, I had to beat up my sister):

    Code:
    <script>
    function changeLength(name,how){
    if(document.all || document.getElementById){
    name.size+=how;
    }}
    </script>
    <FORM name="form1"> 
    <input size="5" name="input1"><br>
    <a href="javascript:void(0)" onclick="changeLength(document.form1.input1,1)" onmouseover="changeLength(document.form1.input1,1)">Make Bigger</a> &nbsp; <a href="javascript:void(0)" onmouseover="changeLength(document.form1.input1,-1)" onclick="changeLength(document.form1.input1,-1)">Make smaller</a>
    </form>
    It won't work in NN 4, but it should work in IE 4+ and NS 6+. For it to work, just go:

    changeLength(nameOfInput,increaseOrDecrease)

    An example is listed above.

    aDog


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
  •