多输入框场景下虚拟键盘的使用问题排查与实现咨询

Hey there! Let's tackle your virtual keyboard issue in multi-input scenarios. I've reviewed your code and identified several key problems that are causing the misbehavior, plus I'll walk you through how to fix them properly.

Key Issues in Your Current Code #

Let's start by pointing out the critical bugs:

1. Incorrect $write Assignment
   In your input click handler, you're setting var $write = id — this turns $write into a string (the input's ID) instead of a jQuery object pointing to the actual input element. Later when you try to call $write.html() or $write.val(), you're trying to run DOM methods on a string, which will fail silently or throw errors.

2. Undefined Variables in Initialization
   Your first code block has a few problems:

   • var write = write(); calls a function write() that isn't defined anywhere.
   • write.currentElementCursorPosition = $('#'+id); uses id which isn't in scope here (this variable only exists inside the input click handler).

3. Hardcoded Input Handling
   The switch statement in your keyboard click handler is hardcoded to specific IDs (#itemNo_1, etc.), which isn't scalable and will break if you add more inputs. Worse, since $write is a string ID, the case checks won't match correctly (you're comparing the string itemNo_1 to #itemNo_1).

4. No Global Tracking of Active Input
   You're not maintaining a persistent reference to the currently focused input. When you click between inputs, the keyboard doesn't know to switch its target.

Fixes & Implementation Steps #

Here's how to rewrite your code to make the virtual keyboard work seamlessly across multiple inputs:

Step 1: Set Up Global State #

First, define global variables to track the active input and keyboard state. This keeps things consistent across interactions:

// Global state to track active input and keyboard status
let currentInput = null;
let shiftActive = false;
let capsLockActive = false;

Step 2: Initialize the Keyboard Correctly #

Fix your initialization code to properly set the first input as active:

$(function() {
  // Initialize: set first input as active
  const $firstInput = $(':input').first().focus();
  currentInput = $firstInput;

  // Your keyboard initialization logic here (assuming write() is a valid function you have)
  // const write = someKeyboardInitFunction();
  // write.init("keyboard");
  // write.currentElement = currentInput;
});

Note: Make sure write() is a defined function — if it's custom keyboard logic, replace the placeholder with your actual initialization code.

Step 3: Update Active Input on Click/Focus #

Modify your input click handler to update the currentInput variable whenever an input is selected:

$(':input').on('click focus', function() {
  // Update global active input to the clicked/focused element
  currentInput = $(this);
});

Adding the focus event ensures the keyboard works if the user tabs into an input too.

Step 4: Rewrite Keyboard Click Logic to Use Dynamic Input #

Update the keyboard key handler to operate on the currentInput instead of hardcoded IDs:

$('#keyboard li').click(function() {
  const $key = $(this);
  let character = $key.html();

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

  // Handle Caps Lock
  if ($key.hasClass('capslock')) {
    $('.letter').toggleClass('uppercase');
    capsLockActive = !capsLockActive;
    return;
  }

  // Handle Delete
  if ($key.hasClass('delete')) {
    if (!currentInput) return;
    
    let currentValue = currentInput.val();
    const updatedValue = currentValue.slice(0, -1);
    currentInput.val(updatedValue);
    
    // If you're using autocomplete, trigger it here
    currentInput.autocomplete("search", updatedValue);
    return;
  }

  // Handle special characters
  if ($key.hasClass('symbol')) character = $key.find('span:visible').html();
  if ($key.hasClass('space')) character = ' ';
  if ($key.hasClass('tab')) character = "\t";
  if ($key.hasClass('return')) character = "\n";

  // Apply uppercase if needed
  if ($key.hasClass('uppercase') || (shiftActive && !capsLockActive) || (capsLockActive && !shiftActive)) {
    character = character.toUpperCase();
  }

  // Reset shift after a character is typed (unless caps lock is active)
  if (shiftActive && !capsLockActive) {
    $('.symbol span').toggle();
    $('.letter').toggleClass('uppercase');
    shiftActive = false;
  }

  // Add character to current input (only if an input is active)
  if (currentInput) {
    const currentValue = currentInput.val();
    currentInput.val(currentValue + character);
    
    // Trigger autocomplete if needed
    currentInput.autocomplete("search", currentValue + character);
  }
});

Key Improvements Explained #

• Dynamic Input Targeting: Instead of hardcoding input IDs, we use currentInput to always reference the active field — this works for any number of inputs.
• Proper DOM Element Handling: currentInput is always a jQuery object, so we can safely call val() and other methods on it.
• Robust State Management: Separating shift/caps lock state into global variables keeps the keyboard behavior consistent.
• Error Prevention: We add checks for currentInput to avoid errors if the keyboard is clicked without an active input.

How to Pass Input ID (If You Still Need It) #

If you ever need to access the active input's ID for other logic, you can get it directly from currentInput:

const activeInputId = currentInput.attr('id');
// Use activeInputId as needed

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