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


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


write text with special characters online (without the need to use your keyboard


(move the bottom right corner with the mouse to make the text field bigger or smaller)




Spanish special letters:


French special letters:


German special letters:


English letters to avoid the keyboard (almost) completely:


numbers:


currency:


Greek letters:


Russian (cyrillic) letters:


Skandinavian special characters:


more special characters:




I created a textarea form that gets write focus so that you can input your text there. To insert special characters I created a button for every special letter and use jquery to add that letter to the textarea text. To clear the entire textarea field I simply created still another button that sets the whole textarea text to an empty string when clicked. It should be easy for you to adapt the program to your own needs only using the special characters that you usually need.
Here is the code:

<!DOCTYPE html>
<html>
<head>


<style>


.special {
	width: 30px;
	height: 30px;
	border: 1px solid #0066FF;

	background-color: #99D6FF;
	border-radius: 25px;
  	-moz-border-radius: 25px;
  	-webkit-border-radius: 25px;
}

.tospell {
	border: 5px solid #FF9933;
	border-radius: 10px;
  	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;

}


.clear{
	width: 100px;
	height: 30px;
	border: 1px solid #0066FF;
	background-color: #99D6FF;
	border-radius: 25px;
  	-moz-border-radius: 25px;
  	-webkit-border-radius: 25px;

}


</style>
<script src="../incl/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $(".special").click(function() {
       letter = $(this).text();
       typedword = $(".tospell").val();
       $(".tospell").val(typedword  + letter);
       document.forms.myform.tospell.focus();
 });  
 
 $(".clear").click(function() {
 	typedword = "";
 	$(".tospell").val(typedword);
       	document.forms.myform.tospell.focus();
 
  });   
});
</script>
</head>

<body onLoad="document.forms.myform.tospell.focus()">

<form name="myform" onsubmit="return false;">
<textarea class="tospell" COLS=40 ROWS=6 name="tospell" >

</textarea>

</form> 
<br>
<button  type='button' class="clear">clear</button>

<br><br>
Spanish special letters:<br>
<button  type='button' class="special">Á</button>
<button  type='button' class="special">á</button>
<button  type='button' class="special">É</button>
<button  type='button' class="special">é</button>
<button  type='button' class="special">Í</button>
<button  type='button' class="special">í</button>
<button  type='button' class="special">Ñ</button>
<button  type='button' class="special">ñ</button>
<button  type='button' class="special">Ó</button>
<button  type='button' class="special">ó</button>
<button  type='button' class="special">Ú</button>
<button  type='button' class="special">ú</button>
<button  type='button' class="special">Ü</button>
<button  type='button' class="special">ü</button>
<button  type='button' class="special">¿</button>
<button  type='button' class="special">¡</button>

<br><br>
French special letters:<br>
<button  type='button' class="special">À</button>
<button  type='button' class="special">à</button>
<button  type='button' class="special">Â</button>
<button  type='button' class="special">â</button>
<button  type='button' class="special">Æ</button>
<button  type='button' class="special">æ</button>
<button  type='button' class="special">Ç</button>
<button  type='button' class="special">ç</button>
<button  type='button' class="special">È</button>
<button  type='button' class="special">è</button>
<button  type='button' class="special">É</button>
<button  type='button' class="special">é</button>
<button  type='button' class="special">Ê</button>
<button  type='button' class="special">ê</button>
<button  type='button' class="special">Ë</button>
<button  type='button' class="special">ë</button>
<button  type='button' class="special">Î</button>
<button  type='button' class="special">î</button>
<button  type='button' class="special">Ï</button>
<button  type='button' class="special">ï</button>
<button  type='button' class="special">Ô</button>
<button  type='button' class="special">ô</button>
<button  type='button' class="special">Œ</button>
<button  type='button' class="special">œ</button>
<button  type='button' class="special">Ù</button>
<button  type='button' class="special">ù</button>
<button  type='button' class="special">Û</button>
<button  type='button' class="special">û</button>

<br><br>
German special letters: <br>
<button  type='button' class="special">Ä</button>
<button  type='button' class="special">ä</button>
<button  type='button' class="special">Ö</button>
<button  type='button' class="special">ö</button>
<button  type='button' class="special">Ü</button>
<button  type='button' class="special">ü</button>
<button  type='button' class="special">ß</button>
<br><br>

English letters to avoid the keyboard (almost) completely: <br>

<button  type='button' class="special">A</button>
<button  type='button' class="special">a</button>
<button  type='button' class="special">B</button>
<button  type='button' class="special">b</button>
<button  type='button' class="special">C</button>
<button  type='button' class="special">c</button>
<button  type='button' class="special">D</button>
<button  type='button' class="special">d</button>
<button  type='button' class="special">E</button>
<button  type='button' class="special">e</button>

<button  type='button' class="special">F</button>
<button  type='button' class="special">f</button>
<button  type='button' class="special">G</button>
<button  type='button' class="special">g</button>
<button  type='button' class="special">H</button>
<button  type='button' class="special">h</button>
<button  type='button' class="special">I</button>
<button  type='button' class="special">i</button>
<button  type='button' class="special">J</button>
<button  type='button' class="special">j</button>

<button  type='button' class="special">K</button>
<button  type='button' class="special">k</button>
<button  type='button' class="special">L</button>
<button  type='button' class="special">l</button>
<button  type='button' class="special">M</button>
<button  type='button' class="special">m</button>
<button  type='button' class="special">N</button>
<button  type='button' class="special">n</button>
<button  type='button' class="special">O</button>
<button  type='button' class="special">o</button>

<button  type='button' class="special">P</button>
<button  type='button' class="special">p</button>
<button  type='button' class="special">Q</button>
<button  type='button' class="special">q</button>
<button  type='button' class="special">R</button>
<button  type='button' class="special">r</button>
<button  type='button' class="special">S</button>
<button  type='button' class="special">s</button>
<button  type='button' class="special">T</button>
<button  type='button' class="special">t</button>


<button  type='button' class="special">U</button>
<button  type='button' class="special">u</button>
<button  type='button' class="special">V</button>
<button  type='button' class="special">v</button>
<button  type='button' class="special">W</button>
<button  type='button' class="special">w</button>
<button  type='button' class="special">X</button>
<button  type='button' class="special">x</button>
<button  type='button' class="special">Y</button>
<button  type='button' class="special">y</button>
<button  type='button' class="special">Z</button>
<button  type='button' class="special">z</button>
<br>
<button  type='button' class="special">.</button>
<button  type='button' class="special">?</button>
<button  type='button' class="special">!</button>
<button  type='button' class="special">,</button>
<button  type='button' class="special">;</button>
<button  type='button' class="special">:</button>
<button  type='button' class="special">_</button>

<button  type='button' class="special">\</button>
<button  type='button' class="special">#</button>
<button  type='button' class="special">"</button>
<button  type='button' class="special">'</button>
<button  type='button' class="special">&sect;</button>

<button  type='button' class="special">(</button>
<button  type='button' class="special">)</button>
<button  type='button' class="special">[</button>
<button  type='button' class="special">]</button>
<button  type='button' class="special">{</button>
<button  type='button' class="special">}</button>
<button  type='button' class="special">&#64;</button>

<br> numbers: <br>
<button  type='button' class="special">0</button>
<button  type='button' class="special">1</button>
<button  type='button' class="special">2</button>
<button  type='button' class="special">3</button>
<button  type='button' class="special">4</button>
<button  type='button' class="special">5</button>
<button  type='button' class="special">6</button>
<button  type='button' class="special">7</button>
<button  type='button' class="special">8</button>
<button  type='button' class="special">9</button>
<br>
<button  type='button' class="special">=</button>
<button  type='button' class="special">≠</button>
<button  type='button' class="special">+</button>
<button  type='button' class="special">-</button>
<button  type='button' class="special">*</button>
<button  type='button' class="special">×</button>
<button  type='button' class="special">/</button>
<button  type='button' class="special">÷</button>
<button  type='button' class="special">&lt;</button>
<button  type='button' class="special">&gt;</button>
<button  type='button' class="special">≤</button>
<button  type='button' class="special">≥</button>
<button  type='button' class="special">∞</button>
<button  type='button' class="special">%</button>
<button  type='button' class="special">‰</button>
<button  type='button' class="special">|</button>
<button  type='button' class="special">&amp;</button>
<button  type='button' class="special">~</button>
<button  type='button' class="special">≈</button>
<button  type='button' class="special">±</button>
<br> currency: <br> 
<button  type='button' class="special">€</button>
<button  type='button' class="special">$</button>
<button  type='button' class="special">¢</button>
<button  type='button' class="special">£</button>
<button  type='button' class="special">¥</button>

<br><br>
Greek letters:
<br>
<button  type='button' class="special">Α</button>
<button  type='button' class="special">α</button>
<button  type='button' class="special">Β</button>
<button  type='button' class="special">β</button>
<button  type='button' class="special">Γ</button>
<button  type='button' class="special">γ</button>
<button  type='button' class="special">Δ</button>
<button  type='button' class="special">δ</button>
<button  type='button' class="special">Ε</button>
<button  type='button' class="special">ε</button>
<button  type='button' class="special">Ζ</button>
<button  type='button' class="special">ζ</button>
<button  type='button' class="special">Η</button>
<button  type='button' class="special">η</button>
<button  type='button' class="special">Θ</button>
<button  type='button' class="special">θ</button>
<button  type='button' class="special">Ι</button>
<button  type='button' class="special">ι</button>
<button  type='button' class="special">Κ</button>
<button  type='button' class="special">κ</button>
<button  type='button' class="special">Λ</button>
<button  type='button' class="special">λ</button>
<button  type='button' class="special">Μ</button>
<button  type='button' class="special">μ</button>
<button  type='button' class="special">Ν</button>
<button  type='button' class="special">ν</button>
<button  type='button' class="special">Ξ</button>
<button  type='button' class="special">ξ</button>
<button  type='button' class="special">Ο</button>
<button  type='button' class="special">ο</button>
<button  type='button' class="special">Π</button>
<button  type='button' class="special">π</button>
<button  type='button' class="special">Ρ</button>
<button  type='button' class="special">ρ</button>
<button  type='button' class="special">Σ</button>
<button  type='button' class="special">σ</button>
<button  type='button' class="special">ς</button>
<button  type='button' class="special">Τ</button>
<button  type='button' class="special">τ</button>
<button  type='button' class="special">Υ</button>
<button  type='button' class="special">υ</button>
<button  type='button' class="special">Φ</button>
<button  type='button' class="special">φ</button>
<button  type='button' class="special">Χ</button>
<button  type='button' class="special">χ</button>
<button  type='button' class="special">Ψ</button>
<button  type='button' class="special">ψ</button>
<button  type='button' class="special">Ω</button>
<button  type='button' class="special">ω</button>
<br><br>
Russian (cyrillic) letters: 
<br>
<button  type='button' class="special">А</button>
<button  type='button' class="special">а</button>
<button  type='button' class="special">Б</button>
<button  type='button' class="special">б</button>
<button  type='button' class="special">В</button>
<button  type='button' class="special">в</button>
<button  type='button' class="special">Г</button>
<button  type='button' class="special">г</button>
<button  type='button' class="special">Д</button>
<button  type='button' class="special">д</button>
<button  type='button' class="special">Е</button>
<button  type='button' class="special">е</button>
<button  type='button' class="special">Ж</button>
<button  type='button' class="special">ж</button>
<button  type='button' class="special">З</button>
<button  type='button' class="special">з</button>
<button  type='button' class="special">И</button>
<button  type='button' class="special">и</button>
<button  type='button' class="special">Й</button>
<button  type='button' class="special">й</button>
<button  type='button' class="special">К</button>
<button  type='button' class="special">к</button>
<button  type='button' class="special">Л</button>
<button  type='button' class="special">л</button>
<button  type='button' class="special">М</button>
<button  type='button' class="special">м</button>
<button  type='button' class="special">Н</button>
<button  type='button' class="special">н</button>
<button  type='button' class="special">О</button>
<button  type='button' class="special">о</button>
<button  type='button' class="special">П</button>
<button  type='button' class="special">п</button>
<button  type='button' class="special">Р</button>
<button  type='button' class="special">р</button>
<button  type='button' class="special">С</button>
<button  type='button' class="special">с</button>
<button  type='button' class="special">Т</button>
<button  type='button' class="special">т</button>
<button  type='button' class="special">У</button>
<button  type='button' class="special">у</button>
<button  type='button' class="special">Ф</button>
<button  type='button' class="special">ф</button>
<button  type='button' class="special">Х</button>
<button  type='button' class="special">х</button>
<button  type='button' class="special">Ц</button>
<button  type='button' class="special">ц</button>
<button  type='button' class="special">Ч</button>
<button  type='button' class="special">ч</button>
<button  type='button' class="special">Ш</button>
<button  type='button' class="special">ш</button>
<button  type='button' class="special">Щ</button>
<button  type='button' class="special">щ</button>
<button  type='button' class="special">Ъ</button>
<button  type='button' class="special">ъ</button>
<button  type='button' class="special">Ы</button>
<button  type='button' class="special">ы</button>
<button  type='button' class="special">Ь</button>
<button  type='button' class="special">ь</button>
<button  type='button' class="special">Э</button>
<button  type='button' class="special">э</button>
<button  type='button' class="special">Ю</button>
<button  type='button' class="special">ю</button>
<button  type='button' class="special">Я</button>
<button  type='button' class="special">я</button>
<br><br>
Skandinavian special characters:<br>
<button  type='button' class="special">Æ</button>
<button  type='button' class="special">æ</button>
<button  type='button' class="special">Å</button>
<button  type='button' class="special">å</button>
<button  type='button' class="special">Ä </button>
<button  type='button' class="special">ä</button>
<button  type='button' class="special">Ð</button>
<button  type='button' class="special">ð</button>
<button  type='button' class="special">Ø </button>
<button  type='button' class="special">ø</button>
<button  type='button' class="special">Ö</button>
<button  type='button' class="special">ö</button>
<button  type='button' class="special">Þ</button>
<button  type='button' class="special">þ </button>
<br><br> more special characters: <br>
<button  type='button' class="special">☆</button>
<button  type='button' class="special">☼</button>
<button  type='button' class="special">☾</button>
<button  type='button' class="special">☁</button>
<button  type='button' class="special">❄ </button>
<button  type='button' class="special">♡</button>
<button  type='button' class="special">♫</button>
<button  type='button' class="special">☺ </button>


Happy typing!



Copyright © 2004-2017 Katja Socher, tuxgraphics.org