Utilizing a custom keyboard with Jquery for a recurring function

It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below:

The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purposes, every time I click on a different text field and input keys, I end up with double characters in the field.

Here's the modified code:

<!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">
            <!-- Keyboard layout goes here -->
        </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();
    });

    // JavaScript functions for keyboard functionality

</script>'

Answer №1

Every time you click on inputs, the event gets bound to #keyboard li. To prevent this, simply add unbind() before the click event like so:

$('#keyboard li').unbind().click(function ()

Answer №2

To start off, my recommendation is to make sure your code is fixed by incorporating the var when necessary and properly nesting it (if required).

$(document).ready(function () {
    var $write, shift, capslock; //global declaration

    // Hiding Keyboard upon loading
    $('#keyboard li').hide();

    $('.tbx').click(function () {

        $('#keyboard li').show();


        var inputBox = $(this).attr('id'),
            i = '#',
            GetId = i.concat(inputBox);
        $write = $(GetId);
        shift = false;
        capslock = false;
    });

    $('#keyboard li').click(function () {
        var $this = $(this),
            character = $this.html(); // This variable remains unchanged if it's a lowercase letter

        // 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;
        }

        // Hiding 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')) {
            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();

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

            shift = false;
        }

        // Adding the character
        $write.html($write.html() + character);


    });
});

Once your code is in order and easy to follow, you can then proceed to review it for any potential bugs.

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

How can I pass a value from JavaScript back to the .blade file in Laravel using DataTables?

I have some rows that are being displayed: https://i.sstatic.net/Y10X7.png The DataTable plugin within app.js is responsible for outputting each row. My goal is to target a specific value, ${row.category_id} let TABLE = $('#categoryList').Data ...

Tips for converting an entire column along the vertical axis to a different language

Looking for a solution with my grid view where I want to translate the items of the second column on the y axis, as shown in the image. I attempted to use the translateY() function, but it resulted in the need to scroll in order to see the translated items ...

Trouble with Ruby on Rails jQuery interactions when using the tokenInput gem

Currently, I am developing a rails app and attempting to incorporate this gem for a text field https://github.com/exAspArk/rails-jquery-tokeninput Despite having the gem correctly installed and included in my _form.html.erb file, I keep encountering the ...

Ways to efficiently verify if a URL is valid by checking if it loads a page with content

INQUIRY: How can I verify if a URL is valid and loads a webpage successfully? Currently, my code only checks the status code, which means that a URL like will be considered valid even though it does not load any content. Is there a way to ensure that t ...

Ways to toggle the visibility of an element based on the condition of two other elements

I'm facing a challenging UI use-case that I just can't crack. I have 2 non-nested divs that are causing me trouble (not nesting is crucial here as it would have made things much simpler). Here is the structure of the divs: <div class="a"> ...

React TSX file not recognizing JSON data stored in an HTML data attribute

I am having some trouble with implementing the password toggle component from the Preline UI. Here is how the component looks: "use client" import React, { ChangeEvent, MouseEventHandler, useEffect } from "react"; export default functi ...

Performing mathematical computations through a mixin without relying on inline javascript code

Looking to enhance my web app with a mixin that shows a list of entries, each with a time stamp indicating how long ago it was posted. mixin listTitles(titles) each title in titles article.leaf article a.headline(href=title.URL)= title.t ...

The agony of CSS in Emacs on Auto Complete Mode, portrayed vividly!

Recently, I added Auto Complete Mode to my Emacs setup. Issue #1: When typing declarations, the auto-complete feature works fine until I hit ;: Unexpectedly, it automatically tries to complete something! Pressing Enter would accept this unwanted completi ...

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

What is the best way to place a p-growl element in the bottom right corner of the page?

I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this: ::ng-deep .ui-growl { position: fixed; b ...

Ways to extract the initial layer of information from a JSON document

I have a JSON file named movie.json stored externally, and it follows this format: { "action": [ { "id": "1001", "name": "Matrix" }, { "id": "1002", & ...

Triggering a form submission in JavaScript when a selection is changed

Welcome to my WordPress site! If you would like to check it out, visit this link. Currently, I have a form located next to the text "Filter By Location:". My goal is to have the form submitted automatically when one of the options is selected (onChange). ...

Retain the formatting of HTML while extracting the text

Is there a simple way to extract text from HTML source without losing formatting (such as line breaks and spaces)? Currently, my text extraction process looks like this: page_title_element = driver.find_element_by_xpath("x-path") page_title = pa ...

Using Webpack to transfer a function to the front-end

I am currently delving into the world of webpack and attempting to set up a basic integration. Within my file script.js, I have included some essential functions: scripts.js export foo = () => { console.log('foo') } export bar = () => ...

It is not possible for ReactJS to disable a button that has been created dynamically

Incorporating ReactJS, I dynamically generate a form using customized JSON data. render() { return ( <div> <ShowForm src={this.state.data} /> </div> ); } After updating with componentDidUp ...

Exploring the interaction between Bootstrap and AngularJS in creating unique menu functionality

UPDATE: added JSFiddle link I am currently working on creating a dynamic menu or set of options that will be populated based on server requests. The data structure I am dealing with is as follows (some unnecessary data has been omitted): { "name" : ...

Encountering an issue with blogs.map function in a Next.js application

import Head from 'next/head' import { useState } from 'react' import Image from 'next/image' import styles from '../styles/Home.module.css' const Home = (props) => { const [blogs, setblogs] = useState(props.dat ...

Guidelines on executing a function after page load in meteor

Currently, I am using cursor.observeChanges to monitor new records inserted in MongoDB and trigger a notification when that happens. The issue I am facing is that these notifications are popping up when my app is loaded for the first time or when I navigat ...

sending ajax information to create a pie chart displaying data percentages

I am currently facing confusion on how to pass or assign a value of my data-percent pie chart through my ajax data retrieved from the database. While I have successfully passed other fields using an id, I am stuck on how to incorporate the value for data p ...

Continuous animation for a sequence of overlapping images with smooth transitions

Currently, I am in the process of developing a JavaScript script that will cycle through a series of images within the same <div>. The goal is to create a seamless animation effect with the image transitions. Although the images are cycling through, ...