如何修改jQuery代码实现文本框输入内容显示在静态文本右侧

修改后可直接运行的代码 #

$("#staticTextId").on('keyup', function(){
    var str = $(this).val();
    // 定义左侧静态文本，可根据需要自行修改内容
    var prefix = "static text ";
    var prefixLength = prefix.length;

    // 校验当前输入是否已包含静态前缀，没有则自动补充到开头
    if(str.indexOf(prefix) !== 0){
        str = prefix + str;
    }

    // 提取用户自主输入的内容（自动过滤掉前缀部分）
    var userInput = str.slice(prefixLength);
    // 拼接最终展示内容：静态前缀固定在左侧，用户输入在右侧
    var finalStr = prefix + userInput;

    $(this)
        .val(finalStr)
        // 光标固定定位到输入框最末尾，保证后续输入始终追加在静态文本右侧
        .get(0).setSelectionRange(finalStr.length, finalStr.length);    
});

核心修改说明 #

• 原代码逻辑是将静态文本作为后缀拼在用户输入之后，调整后改为将静态文本作为前缀固定拼在用户输入之前
• 新增前缀存在性校验，避免用户误操作删除左侧的静态文本内容
• 调整光标定位规则，不会出现光标跳到静态文本区域打断输入的问题

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