calculate string width dynamically

Discussion in 'Javascript' started by strauchdieb, Oct 5, 2006.

  1. strauchdieb

    strauchdieb Guest

    hey everyone

    i try to figure out how to calculate string width in a textarea while
    typing in it.
    the textarea has a fixed start width. when the string gets longer as
    the textarea width, the textarea should be made bigger while typing
    programatically.

    my only problem is to determine the size of the string in the textarea.
    i know the font family and font size.

    who can help me?

    thanks for your help
    strauchdieb, Oct 5, 2006
    #1
    1. Advertising

  2. strauchdieb

    Touffy Guest

    On 2006-10-05 12:29:20 +0200, "strauchdieb" <> said:

    > i try to figure out how to calculate string width in a textarea while
    > typing in it.


    you mean a text input, or really a multiline textarea ?

    > the textarea has a fixed start width. when the string gets longer as
    > the textarea width, the textarea should be made bigger while typing
    > programatically.
    >
    > my only problem is to determine the size of the string in the textarea.
    > i know the font family and font size.


    If you use a monospace font, then the text should take exactly as many
    ems as there are characters on the longest line (use split(/\n\r?/) on
    the value, and find the longest string in the returned array), so you
    can set the textareas's style.width to that length+"em".

    You may want to replace() tabs in the value with a predetermined number
    of spaces before counting the characters.

    If you're not using a monospace font, you can still measure the length
    of the value but not inside a form input. You'll have to copy the value
    inside an invisible/offscreen (but with a display:block) div with
    white-space:pre and the same font-family and font-size as the textarea.
    Once this div is created and rendered (a short setTimeout might be in
    order), you can read its offsetWidth or clientWidth property (try both
    because some browsers support only one) and that's the width in pixels,
    that you can apply to the textarea after adding the unit "px".
    Doing all this would probably take more time than you care to spend on
    every keydown event, though...

    --
    David Junger
    Touffy, Oct 5, 2006
    #2
    1. Advertising

  3. strauchdieb

    strauchdieb Guest

    thanks david.
    this solution will work for my needs.
    strauchdieb, Oct 5, 2006
    #3
    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. AndrewF
    Replies:
    1
    Views:
    773
    Bruce Barker
    Oct 10, 2005
  2. Replies:
    14
    Views:
    13,793
  3. Replies:
    0
    Views:
    936
  4. Replies:
    12
    Views:
    280
  5. strauchdieb

    calculate string width dynamically

    strauchdieb, Oct 5, 2006, in forum: Javascript
    Replies:
    3
    Views:
    89
    Otto Lang
    Oct 5, 2006
Loading...

Share This Page