Results 1 to 4 of 4

Thread: form field data that is longer than the width of the box

  1. #1
    Join Date
    Nov 2007
    Location
    Glasgow
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default form field data that is longer than the width of the box

    Hi,
    Quick question really, and feel a bit dense asking it! When you have a text box that is say width=30, but your user puts a long piece of text in, when you tab out (in IE7 and FF2.0.0.9 at least!) the textbox still shows the last characters you put in. Is it possible to have it return to the start and show the first characters entered instead (effectively left justifying it)? I'm not sure if this is something that is controlled by the browser, or something that can be changed with code.
    Can anyone help?
    Thanks
    Ali

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    There may be a pure HTML way to do this, but I don't know it if there is one. Javascript can do it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function lineText(el){
    var save=el.value;
    el.value='';
    setTimeout(function(){el.value=save;}, 0);
    }
    </script>
    </head>
    <body>
    <form action="#">
    <div>
    <input type="text" onblur="lineText(this);"><br>
    <input type="text">
    </div>
    </form>
    </body>
    </html>
    Last edited by jscheuer1; 11-21-2007 at 04:02 PM. Reason: remove extraneous style
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2007
    Location
    Glasgow
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excellent, that's just what I needed, thanks very much!
    Ali

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    If you like that and want to do it for all of your text fields, you can do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <form action="#">
    <div>
    <input type="text"><br>
    <input type="TEXT"><br>
    <input><br>
    <input type="button" value="this button does nothing really">
    </div>
    </form>
    <script type="text/javascript">
    ;(function(){if(!document.getElementsByTagName)return;for(var x,y=
    function(e){var z=e&&e.target?e.target:event.srcElement,s=z.value;
    z.value='';setTimeout(function(){z.value=s;},0);},t=
    document.getElementsByTagName('input'),i=t.length-1;i>-1;--i)
    if((x=t[i].getAttribute('type',0))=='text'||x==null)t[i].onblur=y;})();
    </script>
    </body>
    </html>
    The script could even be made external and used with multiple pages. It must appear or be linked as the very last thing before the </body> tag (or at least be after all text inputs on the page that you want this treatment given to).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •