0
Ich hoffe, dass ich gerade etwas verpasst haben hier wirklich einfach, ich den Code aus dem Tutorial unten bin mit:Jquery Funktion zu wiederholen, wenn benutzerdefinierte Tastatur
http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774
Das Projekt ist ein Popup-Tastatur für ein haben Touchscreen, ich habe aus verschiedenen Gründen einige Änderungen vorgenommen und jedes Mal, wenn ich auf ein separates Textfeld klicke und die Tasten eintrage, bekomme ich die doppelten Zeichen im Feld.
-Code unten:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/keyboard_css.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<label>Client Name</label><div class="tbx" id="tbx_1" contenteditable></div>
<div class="tbx" id="tbx_2" contenteditable></div>
<div class="tbx" id="tbx_3" contenteditable></div>
<div class="tbx" id="tbx_4" contenteditable></div>
<div class="tbx" id="tbx_5" contenteditable></div>
<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">DEL</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</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">ENTER</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="hide">HIDE</li>
<li class="space lastitem"> </li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
// Hide Keyboard on load
$('#keyboard li').hide();
});
$(function(){
// Show Keyboard on click
$('.tbx').click(function() {
$('#keyboard li').show();
inputBox = $(this).attr('id');
//alert(inputBox);
i = '#';
GetId = i.concat(inputBox);
$write = $(GetId),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
$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;
}
// Hide Keyboard
if ($this.hasClass('hide')) {
$('#keyboard li').hide();
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
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.html($write.html() + character);
});
});
});
</script>'
Immer wenn Sie eine Variable deklarieren, müssen Sie 'var' – Yuri