Home |  Electronics |  Toolbox |  Gini and Karl's world |  E-cards |  Photos |  Online-Shop


story time | science club | math blog | computer corner  |  penguin page | home

html/css/jquery: Writing text backwards

A reader who liked the upside down text asked for text that is just written backwards without being upside down as well. So here it is:

Enter your text here:




Here's your text now written backwards:



Here is the code:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>

<script type="text/javascript">

$(document).ready(function(){
	$('input#backwardsbutton').click(function() {
		var text = $('textarea#yourbackwardstext').val();
		backwards = "";
		
		for (i=text.length-1; i>=0; i--){
			backwards +=text[i];	
		
		}
		$("#backwardstext").text(backwards);
	});

});
</script>
</head>
<body>


<p>    
Enter your text here:
<br><br>
<form name="upsidedownform" onsubmit="return false;"><!-- needed for safari to not submit the form -->
<textarea name="yourbackwardstext" id="yourbackwardstext" cols="10" rows="2""></textarea><br><br>
<input  id="backwardsbutton" value="make your text backwards" type="button"> 
</form>

<br>
Here's your text now written backwards: <br><br>
<div id="backwardstext"></div>
<br>
<br>

</p> 
</body>
</html>

There are many different ways how this can be achieved. There's an interesting article by Edward Mann where he is describing 10 different ways how you can do this and also looks at the different performances of those different ways in different browsers: Ten ways to reverse a string in JavaScript. Enjoy!



Copyright © 2004-2017 Katja Socher, tuxgraphics.org