如何实现jQuery自动生成标题且用户手动修改后停止自动更新

核心实现逻辑 #

• 新增全局状态标识，记录输入框是否被用户手动编辑过
• 给主题输入框绑定输入事件，用户手动修改内容时将状态标记为已修改
• 原有textarea的自动填充逻辑执行前先校验状态，若已被用户修改则直接终止自动更新逻辑

完整实现代码 #

// 全局标识：记录输入框是否被用户手动修改，默认未修改
let inputIsManualModified = false;

// 监听主题输入框的输入事件，用户手动操作时触发
$('#input').on('input', function() {
    inputIsManualModified = true;
});

// 原有的textarea内容监听逻辑
$('#textarea').on('input keyup', function() {
    // 如果用户已经手动修改过输入框，直接跳过自动填充逻辑
    if (inputIsManualModified) return;

    const contentVal = $('#textarea').val().trim();
    // 过滤连续空格产生的空元素，保证分词准确
    const contentValSplit = contentVal.split(/\s+/).filter(item => item);
    
    let fillContent = '';
    if (contentValSplit.length >= 5) {
        // 内容超过5个词时取前5个拼接省略号
        fillContent = contentValSplit.slice(0, 5).join(' ') + '...';
    } else {
        // 内容不足5个词时直接填充全部内容
        fillContent = contentVal;
    }
    $('#input').val(fillContent);
});

额外优化说明 #

• 修复了原逻辑中分词遇到连续空格会产生空元素的问题，提升了分词准确性
• 调整了自动填充的判断逻辑，统一按照textarea内容的分词长度处理填充规则，避免原逻辑可能出现的判断错误
• 替换了已废弃的bind方法为jQuery推荐的on方法，兼容性更好

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