Got it, let's sort out this issue where your virtual keyboard is typing into every input field instead of just the one that's currently focused. Here's the breakdown of what's wrong and how to fix it:

What's Causing the Problem? #

Your original code collects all input IDs into the $write array with this line:

var $write = $(":input").on('focus').map((i, el) => el.id).get();

Then when you trigger keyboard clicks, you're modifying the value/html of all those inputs at once, which is why they sync up. We need to track just the single input that's currently focused instead.

Step-by-Step Fix #

1. Track the Current Focused Input #

Instead of storing all input IDs, use a variable to hold the currently focused input element. Add a focus event listener to all inputs to update this variable whenever a user clicks or tabs into an input.

2. Update Keyboard Logic to Target Only the Current Input #

Modify the keyboard click handler to only interact with the currentInput variable, not the entire collection of inputs.

3. Fix the Backspace Logic (Bonus!) #

Your original code had a bug where the backspace key was toggling caps lock instead of deleting text—we'll fix that too.

Modified Full Code #

First Script (Keyboard Logic) #

$(function(){
  // Track the currently focused input
  let currentInput;
  
  // Update currentInput whenever an input gets focus
  $(":input").on('focus', function() {
    currentInput = $(this);
  });

  let shift = false, capslock = false;

  $('#keyboard li').click(function(){
    var $this = $(this), character = $this.html();

    // Shift keys
    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
      $('.letter').toggleClass('uppercase');
      $('.symbol span').toggle();
      shift = !shift;
      capslock = false;
      return false;
    }

    // Caps lock
    if ($this.hasClass('capslock')) {
      $('.letter').toggleClass('uppercase');
      capslock = true;
      return false;
    }

    // Backspace (fixed the original bug here)
    if ($this.hasClass('backspace')) {
      if (!currentInput) return;
      let currentVal = currentInput.val();
      let newVal = currentVal.substr(0, currentVal.length - 1);
      currentInput.val(newVal);
      currentInput.autocomplete("search", newVal);
      return false;
    }

    // Delete
    if ($this.hasClass('delete')) {
      if (!currentInput) return;
      let currentVal = currentInput.val();
      let newVal = currentVal.substr(0, currentVal.length - 1);
      currentInput.val(newVal);
      currentInput.autocomplete("search", newVal);
      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') || (shift && !capslock)) {
      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 to the current focused input
    if (currentInput) {
      currentInput.val(currentInput.val() + character);
      currentInput.autocomplete("search", currentInput.val());
    }
  });
});

Second Script (Initial Focus Setup) #

$(function () {
  var write = write();
  write.init("keyboard");
  
  // Set initial focused input and update our currentInput variable
  var $firstInput = $(":input").first().focus();
  write.currentElement = $firstInput;
  write.currentElementCursorPosition = 0;
  // Sync with our tracking variable
  currentInput = $firstInput;
});

How It Works Now #

• Whenever any input gets focus, currentInput is updated to point to that specific input.
• All keyboard actions (typing, backspace, delete) only affect currentInput, so only the focused input receives text.
• We added checks to make sure currentInput exists before trying to modify it, preventing errors if no input is focused.

内容的提问来源于stack exchange，提问作者Vivek Pandey