基于jQuery实现虚拟键盘与硬件键盘功能一致及自动补全问题咨询

当然可以用jQuery实现和硬件键盘功能几乎完全一致的虚拟键盘！咱们一步步拆解你的问题，逐个解决：

你遇到的autocomplete失效，大概率是因为虚拟键盘插件（jskeyboard.js）在输入字符时，只修改了输入框的value属性，没有触发浏览器原生的input或keyup事件——而大多数自动补全插件（比如jQuery UI Autocomplete）是依赖这些事件来感知输入变化的。

解决方法很直接：

• 检查jskeyboard.js的文档，看看有没有输入回调钩子，如果有，在每次按键输入完成后手动触发目标输入框的原生事件：

  // 假设插件有onKeyPress回调
  $('#your-input').jskeyboard({
    onKeyPress: function(key) {
      $(this).trigger('input').trigger('keyup');
    }
  });
  

• 如果插件没有提供回调，你可以自己给虚拟键盘的按键绑定点击事件，在修改输入框值后触发事件：

  $('.jskeyboard-key').on('click', function() {
    const input = $('#target-input');
    // 这里是插件原本的输入逻辑，比如插入字符
    // ...
    // 触发事件让autocomplete感知
    input.trigger('input');
  });
  

• 另外要确认：autocomplete绑定的目标元素，和虚拟键盘输入的目标是同一个输入框，避免绑定错元素导致失效。

硬件键盘的核心功能可以分成几类，咱们逐一实现：

1. 基础输入与状态切换（大小写、符号） #

• 维护两个状态变量：isCapsLock（大小写锁定）、isShiftActive（临时切换大小写/符号）
• 点击Caps Lock键时，切换isCapsLock的布尔值；点击Shift键时，临时将isShiftActive设为true，松开后恢复
• 按键点击时，根据当前状态插入对应字符（比如Shift+数字键插入!@#$这类符号）

2. 核心功能键实现 #

• 退格键：要支持删除选中内容，或者光标前的单个字符，同时保持光标位置正确：

  function handleBackspace(input) {
    const start = input[0].selectionStart;
    const end = input[0].selectionEnd;
    if (start !== end) {
      // 有选中内容，删除选中部分
      input.val(input.val().slice(0, start) + input.val().slice(end));
      input[0].selectionStart = input[0].selectionEnd = start;
    } else if (start > 0) {
      // 无选中，删除光标前字符
      input.val(input.val().slice(0, start - 1) + input.val().slice(end));
      input[0].selectionStart = input[0].selectionEnd = start - 1;
    }
    input.trigger('input');
  }
  

• 回车键：根据场景触发表单提交或换行，或者模拟原生回车事件：

  $('#enter-key').on('click', function() {
    const input = $('#target-input');
    // 触发原生keydown事件，键码13对应回车
    input.trigger($.Event('keydown', { keyCode: 13 }));
  });
  

• Tab键：实现焦点在可交互元素间切换：

  $('#tab-key').on('click', function() {
    const currentFocus = $(':focus');
    const focusableElements = $('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    const currentIndex = focusableElements.index(currentFocus);
    // 切换到下一个可聚焦元素，循环回到第一个
    focusableElements.eq((currentIndex + 1) % focusableElements.length).focus();
  });
  

• Ctrl组合键：实现复制、粘贴、剪切功能：

  let isCtrlActive = false;
  $('#ctrl-key').on('mousedown', () => isCtrlActive = true);
  $('#ctrl-key').on('mouseup mouseleave', () => isCtrlActive = false);
  
  $('#copy-key').on('click', () => {
    if (isCtrlActive) document.execCommand('copy');
  });
  $('#paste-key').on('click', () => {
    if (isCtrlActive) document.execCommand('paste');
  });
  

3. 光标位置处理 #

这是很多虚拟键盘容易忽略的关键细节，输入字符时要保持光标在正确位置：

function insertCharacter(input, char) {
  const el = input[0];
  const start = el.selectionStart;
  const end = el.selectionEnd;
  // 插入字符到光标位置
  input.val(input.val().slice(0, start) + char + input.val().slice(end));
  // 恢复光标到插入后的位置
  el.selectionStart = el.selectionEnd = start + char.length;
  input.trigger('input');
}

你提供的是动态添加表格行的逻辑，要注意动态生成的输入框需要重新绑定虚拟键盘和autocomplete：

$("#addmore").on('click', function() {
  // 你的原有添加行代码
  let html = '<tr>';
  html += '<td><input class="case" type="checkbox"/></td>';
  html += '<td><input class="invoice-input" type="text"/></td>'; // 假设新增的输入框有这个类
  html += '</tr>';
  $('#invoiceTable').append(html);
  
  // 初始化新输入框的虚拟键盘和自动补全
  const newInput = $('#invoiceTable tr:last .invoice-input');
  newInput.jskeyboard(); // 调用插件初始化方法
  newInput.autocomplete({
    source: yourAutocompleteDataSource, // 替换成你的数据源
    minLength: 1
  });
});

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