Saturday, August 27, 2011

How to align the value in a text box using javascript?

How to align the value in a text box using javascript?

I found various methods to do it on google, but only one of them worked for me. Hence I decided to write a post on this.

<html>
<head>
<script>
	function mytest3() {
            // This works in both IE and chrome.
            document.getElementById("y1").style.textAlign="right"; 

            // Not working.
            // document.getElementById("y1").style="text-align:right"; 

            // Following works in Chrome (But not in IE)
            // document.getElementById("y1").setAttribute("style", "text-align:right"); 

	}
</script>
</head>
<body>
	<input type="text" id="y1" name="y1" value="2" />
	<input type="button" onClick="mytest3()" value="Please click me"/>
</body>
</html>


Well, for more information why the other two options were not working.
Please have a look at the following URL under section Text Properties
http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Another good link to study is

http://www.webdeveloper.com/forum/showthread.php?t=81111

Well, if you like to use jquery and achive the same thing.

<html>
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
   <script type="text/javascript" src="jquery.js" language="javascript">
    </script>
    <script type="text/javascript" language="javascript"> 
		$(document).ready(function(){
			 $('#mydiv').attr("style","text-align:right");
			
		});
	
   </script>
 </head>
 <body>
	<input type="text" id="mydiv" value="2"/>
 </body>
 </html>


Another very good website for learning javascript is http://jsbin.com/#javascript,html,live

No comments:

Post a Comment