You are here: irt.org | FAQ | JavaScript | Form | 1 | Q205 [ previous next ]
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>