Q205 How can you format numbers as right-aligned in a text field?

irt.org | Knowledge Base | JavaScript | Form 1 | Q205 [ previous next ]

Q205 How can you format numbers as right-aligned in a text field?

This works really well in Netscape Navigator 4, unfortunately Netscape Navigator 3 and Internet Explorer uses a proportional font (or it does on my system):

<form name="formName">
<br><input type="text" name="textfieldName1" size="5">
<br><input type="text" name="textfieldName2" size="5">
<br><input type="text" name="textfieldName3" size="5">
<br><input type="text" name="textfieldName4" size="5">
<br><input type="text" name="textfieldName5" size="5">
</form>

<script language="JavaScript"><!--
function pad(number,length) {
    var str = '' + number;
    while (str.length < length)
        str = ' ' + str;
    return str;
}

document.formName.textfieldName1.value=pad(1,5);
document.formName.textfieldName2.value=pad(22,5);
document.formName.textfieldName3.value=pad(333,5);
document.formName.textfieldName4.value=pad(4444,5);
document.formName.textfieldName5.value=pad(55555,5);
//--></script>

Thanks to Martin Honnen for suggestion of adding a style to the form fields, this should enable Internet Explorer 5 and possibly Internet Explorer 4 to right align a non proportion font:

<form name="formName">
<br><input type="text" name="textfieldName1" size="5" style="font-family: Courier New;>
<br><input type="text" name="textfieldName2" size="5" style="font-family: Courier New;>
<br><input type="text" name="textfieldName3" size="5" style="font-family: Courier New;>
<br><input type="text" name="textfieldName4" size="5" style="font-family: Courier New;>
<br><input type="text" name="textfieldName5" size="5" style="font-family: Courier New;>
</form>

<script language="JavaScript"><!--
function pad(number,length) {
    var str = '' + number;
    while (str.length < length)
        str = ' ' + str;
    return str;
}

document.formName.textfieldName1.value=pad(1,5);
document.formName.textfieldName2.value=pad(22,5);
document.formName.textfieldName3.value=pad(333,5);
document.formName.textfieldName4.value=pad(4444,5);
document.formName.textfieldName5.value=pad(55555,5);
//--></script>

The following will work on Internet Explorer 4, although on Netscape Navigator 4 it causes the form fields to be right aligned and not the text within the for fields:

<form>
<br><input type="text" name="textfieldName1" size="5" value="1" style="text-align:right">
<br><input type="text" name="textfieldName2" size="5" value="12" style="text-align:right">
<br><input type="text" name="textfieldName3" size="5" value="123" style="text-align:right">
<br><input type="text" name="textfieldName4" size="5" value="1234" style="text-align:right">
<br><input type="text" name="textfieldName5" size="5" value="12345" style="text-align:right">
</FORM>

Feedback on 'Q205 How can you format numbers as right-aligned in a text field?'

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.