页面加载时拼接两输入框值，如何仅保留后半段内容可编辑？

嘿，我来帮你搞定这个需求！咱们先明确目标：页面加载时把隐藏输入框#bold的内容拼到#field的默认值后面，形成固定前缀「CAN'T TOUCH THIS!」+可编辑后缀「gaggle」的效果，而且要确保前缀完全不能被修改，后缀可以自由编辑。

完整实现代码 #

HTML 部分

<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50"/>
<input id="bold" type="hidden" value="gaggle" size="50"/>
<div id="output"> </div>

JavaScript 部分（依赖jQuery）

$(document).ready(function() {
    const $field = $('#field');
    const $hidden = $('#bold');
    // 1. 页面加载时拼接初始值
    const prefix = $field.val();
    const suffix = $hidden.val();
    $field.val(prefix + suffix);
    
    const prefixLength = prefix.length;

    // 2. 限制光标不能移到前缀之前，拦截修改前缀的按键操作
    $field.on('keydown', function(e) {
        const cursorPos = this.selectionStart;
        if (cursorPos <= prefixLength) {
            // 禁止在前缀区域执行删除、后退、左移光标等操作
            switch(e.key) {
                case 'Backspace':
                case 'Delete':
                case 'ArrowLeft':
                    e.preventDefault();
                    // 强制把光标定位到前缀末尾
                    this.setSelectionRange(prefixLength, prefixLength);
                    break;
            }
        }
    });

    // 3. 防止用户通过右键删除、粘贴等方式修改前缀
    $field.on('input paste', function() {
        const currentVal = $(this).val();
        // 检查前缀是否被篡改，若被修改则恢复原前缀
        if (!currentVal.startsWith(prefix)) {
            $(this).val(prefix + currentVal.slice(prefixLength));
        }
        // 确保光标始终停在后半段可编辑区域
        this.setSelectionRange(Math.max(this.selectionStart, prefixLength), Math.max(this.selectionEnd, prefixLength));
    });

    // 4. 输入框聚焦时，自动把光标定位到后缀开头，方便直接编辑
    $field.on('focus', function() {
        this.setSelectionRange(prefixLength, prefixLength);
    });
});

关键逻辑说明 #

• 初始拼接：页面就绪后立刻把隐藏框的值拼到主输入框的默认值后面，生成完整的初始内容。
• 按键拦截：通过keydown事件拦截所有试图修改前缀的操作，比如退格、删除、左箭头，同时强制光标停在前缀末尾，避免误操作。
• 内容校验：监听input和paste事件，一旦发现前缀被修改，立刻恢复原前缀，彻底杜绝用户通过非按键方式破坏固定内容。
• 光标自动定位：输入框聚焦时自动把光标移到后缀开头，用户无需手动调整就能直接编辑后半部分，提升使用体验。

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