var obj = { 'a': '.-', 'b': '-...', 'c': '-.-.', 'd': '-..', 'e': '.', 'f': '..-.', 'g': '--.', 'h': '....', 'i': '..', 'j': '.---', 'k': '-.-', 'l': '.-..', 'm': '--', 'n': '-.', 'o': '---', 'p': '.--.', 'q': '--.-', 'r': '.-.', 's': '...', 't': '-', 'u': '..-', 'v': '...-', 'w': '.--', 'x': '-..-', 'y': '-.--', 'z': '--..', '1': '.----', '2': '..---', '3': '...--', '4': '....-', '5': '.....', '6': '-....', '7': '--...', '8': '---..', '9': '----.', '0': '-----' }; function doBackSpace() { if (!$('#monitor').text()) return; // backspace on monitor var tmp = $('#monitor').text().split(' ').filter(Boolean); $('#monitor').text(''); for (var i=0; i'); $('body').append('

'); $.each(obj, function(key, value) { $('#keyboard').append(''); }); $('#keyboard').append(''); $('#keyboard').append(''); $('#keyboard').append(''); $(':input:not(#text)').on( { mouseenter: function() { $(this).css("background", "lightblue"); }, mouseleave: function() { $(this).css("background", "black"); }, mousedown: function() { $(this).css("background", "darkgrey"); }, mouseup: function() { $(this).css("background", "black"); } }); $('.key').on( { mouseenter: function() { $(this).css("background", "lightblue"); }, mouseleave: function() { $(this).css("background", "black"); }, mousedown: function() { $(this).css("background", "darkgrey"); var s = $(this).text().toLowerCase(); if (obj[s]) { $('#monitor').append(' ' + obj[s]); $('#text').val($('#text').val() + $(this).text().toLowerCase()); } }, mouseup: function() { $(this).css("background", "black"); } }); $(':reset').click(function() { $('#text').val(''); $('#monitor').text(''); }); $('#backspace').click(function() { // do backspace on monitor doBackSpace(); // backspace on text input $('#text').val($('#text').val().slice(0, -1)); }); $('#text').keypress(function(e) { var charCode = e.which; if (!charCode) return; if (charCode == 8) { doBackSpace(); return; } var s = String.fromCharCode(charCode).toLowerCase(); if (obj[s]) $('#monitor').append(' ' + obj[s]); }); });

Morse Code Translater