jQuery Sanal Klavye

jquery keyboard

jQuery ve CSS kullanılarak hazırlanmış bir klavye uygulaması.
Bazen bildiğimiz programlama dilleri ile oynamak eğlenceli olabiliyor. CSS , online klavye oluşturmak için güzel olabilir, ve sonra jQuery ile çalışmasını sağladık düşündüm. Klavye tuşlarını işlemleri içermektedir.

HTML kodlarımız

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Gumusluoglu.Com Online Klavye</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<textarea id="write" rows="6" cols="60" style="display:compact"></textarea>
<ul id="keyboard">
<li><span>`</span><span>~</span></li>
<li><span>1</span><span>!</span></li>
<li><span>2</span><span>@</span></li>
<li><span>3</span><span>#</span></li>
<li><span>4</span><span>$</span></li>
<li><span>5</span><span>%</span></li>
<li><span>6</span><span>^</span></li>
<li><span>7</span><span>&amp;amp;amp;amp;amp;amp;amp;</span></li>
<li><span>8</span><span>*</span></li>
<li><span>9</span><span>(</span></li>
<li><span>0</span><span>)</span></li>
<li><span>-</span><span>_</span></li>
<li><span>=</span><span>+</span></li>
<li>delete</li>
<li>tab</li>
<li>q</li>
<li>w</li>
<li>e</li>
<li>r</li>
<li>t</li>
<li>y</li>
<li>u</li>
<li>i</li>
<li>o</li>
<li>p</li>
<li><span>[</span><span>{</span></li>
<li><span>]</span><span>}</span></li>
<li><span>\</span><span>|</span></li>
<li>caps lock</li>
<li>a</li>
<li>s</li>
<li>d</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li><span>;</span><span>:</span></li>
<li><span>'</span><span>&amp;amp;amp;amp;amp;amp;quot;</span></li>
<li>return</li>
<li>shift</li>
<li>z</li>
<li>x</li>
<li>c</li>
<li>v</li>
<li>b</li>
<li>n</li>
<li>m</li>
<li><span>,</span><span>&amp;amp;amp;amp;amp;amp;lt;</span></li>
<li><span>.</span><span>&amp;amp;amp;amp;amp;amp;gt;</span></li>
<li><span>/</span><span>?</span></li>
<li>shift</li>
<li>&amp;amp;amp;amp;amp;amp;nbsp;</li>
</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html> 

Css kodalarımız

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
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: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.capslock, .tab, .left-shift {
clear: left;
}
#keyboard .tab, #keyboard .delete {
width: 70px;
}
#keyboard .capslock {
width: 80px;
}
#keyboard .return {
width: 77px;
}
#keyboard .left-shift {
width: 95px;
}
#keyboard .right-shift {
width: 109px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
#keyboard .space {
clear: left;
width: 681px;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}

Javascript kodlarımız

$(function(){
var $write = $('#write'),
shift = false,
capslock = false;

$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();

shift = (shift === true) ? false : true;
capslock = false;
return false;
}

// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}

// Delete
if ($this.hasClass('delete')) {
var html = $write.html();

$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 = ' ';
if ($this.hasClass('tab')) character = &amp;amp;amp;amp;quot;\t&amp;amp;amp;amp;quot;;
if ($this.hasClass('return')) character = &amp;amp;amp;amp;quot;\n&amp;amp;amp;amp;quot;;

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');

shift = false;
}

// Add the character
$write.html($write.html() + character);
});
});

Demo Download

One thought on “jQuery Sanal Klavye

  • Merhaba, Ben sayıların bulunduğu ikinci bi keyboard yapmak istiyorum. Amacım oluşturmuş olduğum formda, sadece sayıların girilebileceği bir alan yapmak ve orda kullanmak istiyorum. İkinci alanımda string değerler girilebilecek şekilde olmasını istiyorum. Bunu tab Bunu nasıl yapabilirim acaba?tşkürler.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir