Realigning inputted for input type="text" onblur

[funkyfox]

This should be easy but is slowly driving me mad..

I have a set of <input type="text"> boxes on a page and inevitably some of the users inputs will excede the width available in the box, causing their input to scroll left.. leaving them unable to see the start of their inputted data.

What I would like to be able to do (and this sounds too simple for words!) is to reset the alignment of the text when the user tabs to, or clicks in another field so that the start of their input becomes visible again but otherwise leaving the input value unchanged. (this happens by default in IE if the input loses then regains focus)

I have tried using the onblur event and javascript to capture and rewrite the data without success and also using the stlye and align attributes with similar results..

This is so simple I'm SURE it must be achievable in a couple of lines of code..

Anyone out there got any ideas?

Cheers..

FunkyFox

[encyclo]

Welcome to the forums funkyfox, and sorry your question went so long without a reply.

Which browser(s) are you having problems with? Are you unable to limit the number of characters in the text field? Are you dealing with a large amount of text (for which a textarea might be better-suited)?

[funkyfox]

Hi Encyclo, thanks for the reply.

The textfields contain information like email address and company names etc which although usually will fit in the allotted width can run up to 100 characters (which is the allotted nvarchar size in the eventual SQL destination column and hence also the maxwidth of the textbox). The target browsers are IE5+ and Mozilla based and since this is really only an issue of style then I'm assuming that Javascript is enabled since if it is not then the data will be unaffected.

The 'problem' appears to be the same in all browsers.. ie. after typing in their email address:

[e-mail]

and tabbing to the next field the user is confronted with their input looking like:

[e-mail]

instead of the more deiarable:

myfirstname.myseco

which is more descriptive..

Any thoughts or should I just move on..

Thanks in advance.

FunkyFox

[funkyfox]

Guess this ones a dead duck?

[Dijkgraaf]

Yes the only time I've seen the text automatically realign itself is when the field got focus again, I've only seen this happen with IE, it doesn't in Firefox.

However in firefox the following trick seems to work
<input type="text" size="3" name="1" onblur="this.value=this.value">
but unfortunatley doesn't work in IE.

[funkyfox]

Thanks Dijkgraaf,

I've played around with similar..

such as:

<input type="text" onBlur="rewrite(this);">

..and with the rewrite function as:

function rewrite(text_box){
text_box.value='any old text you want it to be';
}

this results in beautifully left aligned text as expected. However..

function rewrite(text_box){
var the_text=text_box.value;
text_box.value='any arbitrary value';
text_box.value=the_text;
}

just writes the text back in the original position.

Also, if you write the text to a different textbox then it also appears left justified.. the solution may therefore be to use onblur to create a new textbox, copy in the entered data and then delete the old textbox; however this is far too hideous to even begin to comprehend.. surely there must be a simpler way.. stlye="text-align:left" .. we can but dream!

[Dijkgraaf]

Well maybe then you need to change the size of the box.

In IE there is an overflowX attribute that will resize the box depending on the contents.

[msdn.microsoft.com...]
Not sure if it has become part of the CSS standard as yet.