</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"> </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);
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.