Increase textbox size with Text

Question

I didn't know how to Google this, it always came up with answers I wasn't looking for. So, I have a textbox, I want it so that it has a set size BUT if the text is larger than the size then I want the textboxes size to increase with the Text.

Confusing Right? I'm not too good at explaining this stuff.

New Part: The textbox comes preloaded with this text, but the answers provided only work as they are typing. I can't find onload on the textbox, so what now?

possible duplicate of [Autosizing Textarea](http://stackoverflow.com/questions/7477/autosizing-textarea) — David Thomas, Mar 08 '11 at 15:53
@David I think he's talking about text **box** rather than text *area* — Shadow The GPT Wizard, Mar 08 '11 at 15:57
Okay, so we ARE indeed confused. @SimplePimple: text-BOX (input type="text") or text-AREA? — Mörre, Mar 08 '11 at 15:58

Cosmin · Accepted Answer · 2011-03-08T16:10:05.770

1

This worked for me:
http://www.codingforums.com/showthread.php?t=54130

Also run it on window load (this example is for an asp .net page):

<script type="text/javascript" language="JavaScript" src="../../javascript/Utility.js">
</script>

<script type="text/javascript" >
    window.onload = Init;

    function Init()
    {
      ResizeTextarea(document.getElementById("<%=tbDetails.ClientID%>"));
    }
</script>

edited Mar 08 '11 at 16:10

answered Mar 08 '11 at 15:50

Cosmin

2,365
2
23
29

The link works - but has a question and no answer except for "I found a solution"? – Mörre Mar 08 '11 at 16:01
This worked - I forgot to mention another part of the question. My question has been updated, please answer to that. – SimplePimple Mar 08 '11 at 16:04
1

@SimplePimple: if this answer doesn't **answer** your revised-question why did you accept it? – David Thomas Mar 08 '11 at 16:08

Shadow The GPT Wizard · Answer 2 · 2011-03-08T16:15:29.777

1

Maybe not perfect but here is very simple solution that works:

<input type="text" onkeyup="if (this.value.length > 20) this.size = this.value.length;" />

For prettier things you can Google for "Auto expanding textbox" although you'll find major of the stuff about textarea, not <input type="text" />,

Edit: to make it work onload, add such code to your page:

<script type="text/javascript">
window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        if (oCurInput.type == "text")
            oCurInput.onkeyup();
    }
};
</script>

edited Mar 08 '11 at 16:15

answered Mar 08 '11 at 15:56

Shadow The GPT Wizard

66,030
26
140
208

That's for type="text" inputs, if the question about textarea he's looking for something else. Not correcting this answer, just adding! – Mörre Mar 08 '11 at 15:58
@Mör as he mentioned `size` it's probably textbox, textarea has rows and columns instead of size. :) – Shadow The GPT Wizard Mar 08 '11 at 16:05
Okay, can I just say: **there is no html `textbox` element.** There's `` and `textarea`... :( – David Thomas Mar 08 '11 at 16:10
@David but common name for the `input type="text"` is textbox even if it's not official. :) – Shadow The GPT Wizard Mar 08 '11 at 16:12
yeah, I know; but it's so frustrating that, for *every* question about a 'textbox' *someone* has to ask: 'is that a `textarea` or a text-`input`?' It'd be so much easier to use the real names instead. – David Thomas Mar 08 '11 at 16:23

Increase textbox size with Text

2 Answers2

Linked