我正在制作手机键盘。我在javascript上遇到了麻烦。我知道我在javascript中有一个错误，因为键盘没有键入。这是我的javascript：
$(function() {
var $write = $('#write'),
shift = false,
capslock = false; // This code is imported from Jquery.
// It defines 3 variables, textarea, a shift status, and a caps lock status.
$('#keyboard li').click(function() { //This code creates 2 variables when a character is clicked (Not a symbol ).
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Code for processing the key press.
});
});
// Shift key
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { // If the shift key is pressed,(The shift key is left or right shift) we togle the uppercase value of each letter.
$('.letter').toggleClass('uppercase'); //This code calls the leter to be uppercase.
$('.symbol span').toggle(); //Nothing happens if it is a symbol.
shift = (shift === true) ? false : true; // This code sets the shift key to the opposite boolean. (If shift key= false, set it to true.)
capslock = false; // capslock is not enabled.
return false; // If you hit return, the shift key switches off and makes the shift key false.
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase'); //This code gets the letters you type in and toggles their class to uppercase.
capslock = true; //This code sets the capslock button to true.
return false; // If you hit return, the caps capslock button is false and turns of.
}
// Delete
if ($this.hasClass('delete')) { //This Code happens when hit the delete button.
var html = $write.html(); // This code defines the variable HTML to the write vairiable.HTML, which gets the letters you typed in earlier.
$write.html(html.substr(0, html.length - 1)); //This code makes the delete button delete. The number 0 defines that it deletes the previous number and the number -1 takes away part of the string typed by the user.
return false;
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); //This code sets the symbol charactes' spam to visable, and gets what the characters look like from the HTML that I have typed in earlier.
if ($this.hasClass('space')) character = ' '; //Makes a space bettween characters and symbols typed by the user.
if ($this.hasClass('tab')) character = "\t" // This code uses the \t metaCharacter which finds a tab character. It returns the number in the string of where the character was found, and if the user has not typed anything, it returns -1)
if ($this.hasClass('return')) character = "\n"; // This code uses the \n metaCharacter. If return is pressed, the computer located the user to another line. If there are no more lines, it stays on the same line.
// Uppercase letters
if ($this.hasClass('uppercase')) character = character.toUpperCase(); // This code defines the uppercase method and the toUpperCase method. If you have clicked shift or caps lock, it toggles the uppercase class. It would not work for me so I did some rechearch. I figured out that you need to add the toUpperCase method. The method sets any strings typed and sets the class to uppercase. (I defeined the classes in the index.HTML file.)
// Remove shift once a key is clicked.
if (shift === true) { //This code happenes when shift is true. (Shift is true when it is pressed.)
$('.symbol span').toggle(); //This code happens when a symbol is pressed when shift is on
if (capslock === false) $('.letter').toggleClass('uppercase'); // This code happens when capsLock is false and the shift key is pressed. After a character is pressed with the shift key, the shift is set to false.
shift = false; //Sets the shift key to false.
}
// Add the character
$write.html($write.html() + character); //This code is the last code. It finally adds any of the characters/ symbols. The keyboard is now just a regular keyboard.
});
}）；
有人可以帮我吗？我已尽我所能，但无法使它正常工作。如果有人需要其他详细信息，请让我知道
答案 0 :(得分：0)
有几个键盘和鼠标事件根本无法在触摸屏上运行（例如，悬停，mouseenter，mouseleave等...
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
但是您可以听HTML输入元素中的更改，并以此方式过滤禁止的键。
答案 1 :(得分：0)
尝试此按钮。
var count=0;
$(function() {
var $write = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').click(function(){
var $this = $(this),
character = $this.text();
if($this.hasClass('return')){
$write.append('\n');
}
else if($this.hasClass('tab')){
$write.append('\t');
}
else if($this.hasClass('delete')){
var content=$write.text();
content=content.substring(0, content.length-1);
$write.text(content);
}
else if($this.hasClass('capslock')){
toggleCase();
if($this.hasClass('active')){
capslock=true;
}else{
capslock=false;
}
}
else if($this.hasClass('left-shift') || $this.hasClass('right-shift')){
shift=!shift;
$('.left-shift,.right-shift').toggleClass("active");
if(shift){
$('.on').show();
$('.off').hide();
count++;
}
else{ count=0; }
}
else if($this.hasClass('letter') || $this.hasClass('space')){
if(shift){character=character.toUpperCase();} // Shift Key Only for Symbols and Uppercase letter.
$write.append(character);
count=0;
}
else if($this.hasClass('symbol')){
if(shift){
character = $this.find(".on").text();
count=0;
}
else{
character = $this.find(".off").text();
}
$write.append(character);
}
if(count==0){
shift=false;
$('.left-shift,.right-shift').removeClass("active");
$('.on').hide();
$('.off').show();
}
//alert(character);
// Code for processing the key.
});
});
function toggleCase(){
var upper=/[A-Z]/;
var lower=/[a-z]/;
$letter=$('li.letter');
var letter=$letter.text();
if(lower.test(letter)){
$letter.each(function(i,ele){
$(this).text($(this).text().toUpperCase());
});
$('.capslock').addClass('active');
}
if(upper.test(letter)){
$letter.each(function(i,ele){
$(this).text($(this).text().toLowerCase());
});
$('.capslock').removeClass('active');
}
}* {
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: 600px;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
.active{
background-color:#d8d8d8 !important;
border:1px solid #cecece !important;
}<!DOCTYPE html PUBLIC
<html xmlns= xml:lang="en" lang="en">
<head>
<title>CyberStopKeyboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<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>
</body>
</html>