Не верно работает виртуальная клиатура
Всем привет! Прощу помощи у знающих людей, пока что только изучаю js на начальном уровне.
В общем есть виртуальная клавиатура: Клац При загрузке страницы и попытке сразу печатать с этой клавиатуры, проблем нет. Но при нажатии клавиш на реальной клавиатуре, перестаёт работать виртуальная, приходится перезагружать страницу и снова работает. Как решить этот вопрос? Спасибо. |
Цитата:
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <style> * { 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; } </style> <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span class="on">~</span></li> <li class="symbol"><span class="off">1</span><span class="on">!</span></li> <li class="symbol"><span class="off">2</span><span class="on">@</span></li> <li class="symbol"><span class="off">3</span><span class="on">#</span></li> <li class="symbol"><span class="off">4</span><span class="on">$</span></li> <li class="symbol"><span class="off">5</span><span class="on">%</span></li> <li class="symbol"><span class="off">6</span><span class="on">^</span></li> <li class="symbol"><span class="off">7</span><span class="on">&</span></li> <li class="symbol"><span class="off">8</span><span class="on">*</span></li> <li class="symbol"><span class="off">9</span><span class="on">(</span></li> <li class="symbol"><span class="off">0</span><span class="on">)</span></li> <li class="symbol"><span class="off">-</span><span class="on">_</span></li> <li class="symbol"><span class="off">=</span><span class="on">+</span></li> <li class="delete lastitem">delete</li> <li class="tab">tab</li> <li class="letter">q</li> <li class="letter">w</li> <li class="letter">e</li> <li class="letter">r</li> <li class="letter">t</li> <li class="letter">y</li> <li class="letter">u</li> <li class="letter">i</li> <li class="letter">o</li> <li class="letter">p</li> <li class="symbol"><span class="off">[</span><span class="on">{</span></li> <li class="symbol"><span class="off">]</span><span class="on">}</span></li> <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> <li class="capslock">caps lock</li> <li class="letter">a</li> <li class="letter">s</li> <li class="letter">d</li> <li class="letter">f</li> <li class="letter">g</li> <li class="letter">h</li> <li class="letter">j</li> <li class="letter">k</li> <li class="letter">l</li> <li class="symbol"><span class="off">;</span><span class="on">:</span></li> <li class="symbol"><span class="off">'</span><span class="on">"</span></li> <li class="return lastitem">return</li> <li class="left-shift">shift</li> <li class="letter">z</li> <li class="letter">x</li> <li class="letter">c</li> <li class="letter">v</li> <li class="letter">b</li> <li class="letter">n</li> <li class="letter">m</li> <li class="symbol"><span class="off">,</span><span class="on"><</span></li> <li class="symbol"><span class="off">.</span><span class="on">></span></li> <li class="symbol"><span class="off">/</span><span class="on">?</span></li> <li class="right-shift lastitem">shift</li> <li class="space lastitem"> </li> </ul> </div> <script> $(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 = "\t"; if ($this.hasClass('return')) character = "\n"; // 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.val($write.val() + character); }); }); </script> |
Часовой пояс GMT +3, время: 08:58. |