键盘插件多输入框同步输入异常问题求助

嘿，我懂你这阵子的头疼——用具体ID的时候插件好好的，换成:input选择器就所有输入框一起同步内容，这确实挺闹心的！

问题根源 #

你现在的代码里$write = $(':input')直接选中了页面上所有输入元素，当执行$write.val($write.val() + character)的时候，jQuery会把这个值同步设置给每一个匹配到的输入框，自然就出现了所有框内容一致的情况。咱们要做的，是只对当前正在聚焦的输入框进行操作，而不是一次性选中所有输入框。

解决方案 #

核心思路就是跟踪当前激活的输入框，下面是修改后的完整代码，我标注了关键改动的地方：

第一部分：键盘交互逻辑修改

$(function(){
    // 不再直接选中所有input，用变量存储当前激活的输入框
    let $currentInput = null;
    let shift = false, capslock = false;

    // 监听所有输入框的focus事件，实时更新当前激活元素
    $(':input').on('focus', function() {
        $currentInput = $(this);
    });

    $('#keyboard li').click(function(){
        // 没有激活的输入框就不执行操作
        if (!$currentInput) return false;

        const $this = $(this);
        let character = $this.html();

        // Shift按键逻辑保持不变
        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;
        }

        // 修正原代码里错误的退格逻辑
        if ($this.hasClass('backspace')) {
            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')) {
            let currentVal = $currentInput.val();
            let newVal = currentVal.substr(0, currentVal.length - 1);
            $currentInput.val(newVal);
            $currentInput.autocomplete("search", newVal);
            return false;
        }

        // 特殊字符处理逻辑保持不变
        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";

        // 大写转换逻辑优化
        if ($this.hasClass('uppercase') || (shift && !capslock)) {
            character = character.toUpperCase();
        }

        // 移除shift状态
        if (shift === true) {
            $('.symbol span').toggle();
            if (capslock === false) $('.letter').toggleClass('uppercase');
            shift = false;
        }

        // 仅对当前激活的输入框添加字符
        const currentVal = $currentInput.val();
        $currentInput.val(currentVal + character);
        $currentInput.autocomplete("search", currentVal + character);
    });
});

第二部分：插件初始化代码修改

$(function () {
    const write = write();
    write.init("keyboard");
    // 聚焦第一个输入框，并同步到当前激活变量
    const $firstInput = $(":input").first().focus();
    write.currentElement = $firstInput;
    write.currentElementCursorPosition = 0;
    $currentInput = $firstInput;
});

关键改动说明 #

• 新增$currentInput变量专门存储当前聚焦的输入框
• 给所有:input绑定focus事件，确保切换输入框时，$currentInput能实时更新
• 所有输入操作（添加字符、退格、删除）都只针对$currentInput，不再操作所有输入框
• 修正了原代码里误写的退格逻辑

这样修改后，你点击键盘按键时，内容就只会填入当前正在聚焦的输入框里啦！

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