</head>
<body>

<div id="container">
  <form name="myform">
	<textarea id="write-mail" class='fieldChange'></textarea>
 	<textarea id="write-number" class='fieldChange'></textarea>
    </form>
	<ul id="keyboard">
    <li class="symbol return"><span class="upper"><</span></li>
<li class="symbol tab"><span class="upper">></span></li>
		<li class="symbol"><span class="downing">1</span></li>
		<li class="symbol"><span class="downing">2</span></li>
		<li class="symbol"><span class="downing">3</span></li>
		<li class="symbol"><span class="downing">4</span></li>
		<li class="symbol"><span class="downing">5</span></li>
		<li class="symbol"><span class="downing">6</span></li>
		<li class="symbol"><span class="downing">7</span></li>
		<li class="symbol"><span class="downing">8</span></li>
    <li class="symbol"><span class="downing">9</span></li>
		<li class="symbol"><span class="downing">0</span></li>
		<li class="symbol"><span class="downing">_</span></li>
		<li class="symbol"><span class="upper">-</span>
    <li class="delete lastitem"><span class="downing-right">Видалити</span></li>
		<li class="symbol"><span>=</span></li>
<li class="symbol"> <span class="upper">+</span></li>
    <li class="symbol"><span class="upper">$</span></li>
    <li class="symbol"><span class="upper">q</span></li>
    <li class="symbol"><span class="upper">w</span></li>
    <li class="symbol"><span class="upper">e</span></li>
    <li class="symbol"><span class="upper">r</span></li>
    <li class="symbol"><span class="upper">t</span></li>
    <li class="symbol"><span class="upper">y</span></li>
    <li class="symbol"><span class="upper">u</span></li>
    <li class="symbol"><span class="upper">i</span></li>
		<li class="symbol"><span class="upper">o</span</li>
      <li class="symbol"><span class="upper">p</span></li>
    <li class="symbol"><span class="upper">?</span></li>
		<li class="symbol"><span class="upper">!</span></li>
		<li class="symbol lastitem"><span class="upper">*</span></li>
      <li class="symbol left-symbol"><span class="upper">(</span></li>
      <li class="symbol"><span class="upper">)</span></li>
      <li class="symbol"><span class="upper">%</span></li>
      <li class="symbol"><span class="upper">a</span></li>
      <li class="symbol"><span class="upper">s</span></li>
      <li class="symbol"><span class="upper">d</span></li>
      <li class="symbol"><span class="upper">f</span></li>
      <li class="symbol"><span class="upper">g</span></li>
      <li class="symbol"><span class="upper">h</span></li>
      <li class="symbol"><span class="upper">j</span></li>
      <li class="symbol"><span class="upper">k</span></li>
      <li class="symbol"><span class="upper">l</span></li>
    <li class="symbol"><span class="downing">;</span></li>
		<li class="symbol"><span class="downing">:</span></li>
      <li class="symbol lastitem ravlik"><span class="downing-right-bg">@</span></li>
		<li class="symbol left-symbol"><span>/</span></li>
      <li class="symbol"><span class="upper">\</span></li>
      <li class="symbol"><span class="upper">z</span></l>
    <li class="symbol"><span class="upper">x</span></li>
    <li class="symbol"><span class="upper">c</span></li>
    <li class="symbol"><span class="upper">v</span></li>
    <li class="symbol"><span class="upper">b</span></li>
    <li class="symbol"><span class="upper">n</span></li>
    <li class="symbol"><span class="upper">m</span></li>
		<li class="symbol"><span class="downing-right">,</span></li>
		<li class="symbol"><span class="downing-right">.</span></li>
		<li class="symbol"><span class="upper">"</span></li>
    <li class="symbol lastitem com"><span class="downing-right">.com</span></li>
		<li class="space lastitem">&nbsp;</li>
	</ul>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background: #eee;
color:#004181;
text-transform:uppercase;
font-size:20px;
 font-weight:500;
}
#container {
margin: 100px auto;
width: 1040px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 300px;
height: 60px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
	#keyboard li {
	float: left;
	margin: 0 5px 5px 0;
	width: 54px;
	height: 54px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #6f94b8;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}
		.left-symbol{
		clear: left;
		}
  #keyboard .ravlik{
  width: 80px;
  }
#keyboard .upper{
   margin-top:-5px;
  display:block;
  text-align:left;
  padding-left:10px;
  }
#keyboard .downing{
   margin-top:15px;
  display:block;
  text-align:left;
  padding-left:10px;
  }
#keyboard .downing-right{
   margin-top:15px;
   display:block;
  text-align:right;
  padding-right:10px;
  text-transform:none;
  font-size:18px;
  }
#keyboard .downing-right-bg{
   margin-top:15px;
   display:block;
  text-align:right;
  padding-right:10px;
  text-transform:none;
  font-size:24px;
  }
#keyboard .com{
  width: 135px;
  }
			#keyboard .delete {
			width: 125px;
			}
		.lastitem {
		margin-right: 0;
		}
		#keyboard .space {
		clear: left;
		width: 881px;
		}
		#keyboard li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}
$(function(){
  $(".fieldChange").focus(function(){
$write = $(this);//определяем фокусное поле
});
	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); 
		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.val();
			
		$write.html(html.substr(0, html.length - 1))
			return false;
		}
		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		// Add the character
		$write.html($write.html() + character);
	});
});




Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.