Struggling to design a functional mobile keyboard

I've been working on creating a mobile keyboard, but I'm facing some issues with the JavaScript part. The problem seems to be in my code as the keyboard isn't responding when I try to type. Here's a snippet of the JavaScript I'm using:

$(function() {
  var $write = $('#write'),
    shift = false,
    capslock = false; // This section imports Jquery while defining variables for a textarea, shift status, and caps lock status.
  $('#keyboard li').click(function() { // When a character (not a symbol) is clicked, two variables are created.
    var $this = $(this),
      character = $this.html(); // No changes made if it's a lowercase letter.

    // Key press processing code here
  });
});

// Shift key
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 letters
  if ($this.hasClass('uppercase')) character = character.toUpperCase();

  // Remove shift after key press
  if (shift === true) {
    $('.symbol span').toggle();
    if (capslock === false) $('.letter').toggleClass('uppercase');
    shift = false;
  }

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

Can anyone lend a hand? I've exhausted all my options trying to debug this on my own. Feel free to ask for more information if needed.

Answer №1

Here is a suggestion for customizing your buttons:

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>


Answer №2

When using touchscreens, some keyboard and mouse events, such as hover, mouseenter, and mouseleave, do not work properly.

For more information on how to use touch events, visit this link.

To work around this issue, you can monitor changes within your HTML input element and filter out any keys that are not supported.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing custom filters to navigate through nested ng-repeats

My goal is to achieve a specific behavior by using custom filters. I am working on creating a unified search bar that will display entire group names with all failing students, as well as group names with only the matching students. If you want to see the ...

Using jquery tabulator with Node.js environment

Struggling with implementing a tabulator in a javascript module within my Node.js app. Following the initial setup instructions to define the tabulator in my HTML file worked fine, but encountering an error when trying to replicate it in a javascript modul ...

Updating v-model with inputs is proving to be a difficult task

Creating object instances as responses can be done like this: <el-input :id="'question_' + question.id" v-model="answers[question.id]"></el-input> When entering data into these inputs, the output will look something like this: Answ ...

Guide to exporting HTML files within the build directory in next.js

Is there a way to export HTML files within the build folder in next.js? After exporting it, I noticed that it generated .js extension files instead of .html files. https://i.sstatic.net/VWG7N.png ...

Submitting the ajax form multiple times

Here is the code I am using within the Yii framework: The view form: view.php <div class="form"> <?php $form = $this->beginWidget('CActiveForm',array( 'id'=>'user-profile', 'action&apo ...

Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution. Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site. My task is to utilize this ID to make aja ...

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

Issue with redirecting to another link in Angular routing

After numerous attempts, I finally managed to configure the adviceRouterModule correctly. Despite extensive research and Google searches, I couldn't quite crack it. Here is the configuration for my AdviceRoutingModule: const adviceRouters: Routes = ...

Looping through color transitions upon hover using CSS

I am trying to create a color transition effect on hover, where the background changes from yellow to red and then back to yellow in a loop. I'm having trouble figuring out how to make this transition repeat continuously. Do I need to incorporate Java ...

Creating unique identifiers/primary keys for resources in react-admin: A step-by-step guide

I am working on a nextJS project that utilizes redux for state management and an admin panel called react admin. In my project, I decided to use _id instead of id as the keys. To achieve this, I followed the instructions provided in this custom identifiers ...

Probability of an event occurring when represented as whole numbers in percentage form

Currently, I'm developing a unique job system within a Discord bot that allows users to mine various types of ores. The probability of receiving specific ores is based on the user's mining skill level, which is stored in a database and can vary a ...

What could be causing the malfunction of this Bootstrap button dropdown?

Initially, I attempted using regular HTML for the dropdown button but encountered issues. As a result, I switched to jsfiddle to troubleshoot. Despite my efforts, the dropdown feature still refused to work. If you'd like to take a closer look, here&a ...

Displaying a Laravel variable in an Ajax callback to trigger a separate Ajax function

What I am attempting to accomplish here is quite complex. I aim to utilize one Ajax function across my website to manage information updates. Essentially, a universal update script that will trigger upon form submission. The challenge I am facing is that ...

What is the best way to transfer a value from state to a function as a parameter?

I have been struggling to find a way to pass the value from state (personId) as a parameter to the function (fetchPersonInfo). Despite my efforts, nothing seems to be working. That's why I decided to seek your assistance on this matter. class Page ex ...

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

What is the most effective method for maintaining a stable page connection?

Currently, I am in the process of developing a website using PHP and JQuery. I am looking to implement an automatic page content update feature that triggers whenever new data is fetched from the database. So far, my attempts with JQuery have led me to a ...

Guide to monitoring updates to a universal server-side variable in Angular 2

I am currently developing an application using Angular 2 with Electron and Node. The tests are executed on the server, and the results are stored in a global variable array named testResults. I am able to access this array in Angular by using: declare var ...

What is the reason behind combining all states into a single location in Redux, even if they are not globally accessible?

As a newcomer to React and Redux, I have found them to be quite enjoyable when used together in a small sandbox application. However, as I consider larger applications, I can't help but question why Redux stores the entire application state in a singl ...

Conquering Bootstrap 3's Image Gallery Customizations

I am currently working with Bootstrap 3 RC1 and struggling to set up the image gallery properly. Issue 1 - The ul is adding unnecessary padding-left or margin-left. What do I need to do to eliminate this? Issue 2 - Each li is extending across the contain ...

How can I showcase both a username and email address in a Material UI chip?

I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...