Text field that expands as the user types

[boredboi]

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?

[Kevin Yank]

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).

[Arielladog]

Hey,

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

aDog

[Kevin Yank]

Eh? Say again?

[boredboi]

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?"

[Arielladog]

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>

[Kevin Yank]

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.

[Arielladog]

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>

[Arielladog]

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

[Kevin Yank]

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.

[Arielladog]

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

[Arielladog]

Here's some code I came up with (sorry it took so long, I had to beat up my sister):

<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