前端输入框需求：仅允许姓名中间空格，禁止首尾输入空格的实现

嘿，这个需求我之前做姓名输入框的时候也碰到过，刚好可以给你梳理个靠谱的解决方案！

你目前已经搞定了开头空格的限制，但末尾空格和中间连续空格的问题确实需要多考虑几种场景——比如用户粘贴内容、用鼠标选中编辑后输入，或者不小心打了多个空格的情况。

我调整了你的代码，同时结合keydown和input事件来处理，既能实时阻止无效输入，又能处理粘贴等特殊情况：

$(function() {
    $('body').on('keydown', '#test', function(e) {
        const inputVal = this.value;
        const cursorPos = e.target.selectionStart;
        
        // 按下空格键时判断
        if (e.which === 32) {
            // 禁止在开头输入空格
            if (cursorPos === 0) {
                e.preventDefault();
                return;
            }
            
            // 禁止在末尾已有空格的情况下继续输入空格
            if (cursorPos === inputVal.length && inputVal.endsWith(' ')) {
                e.preventDefault();
                return;
            }
            
            // 禁止在已有空格的位置后连续输入空格
            const hasSpace = inputVal.includes(' ');
            if (hasSpace) {
                const afterCursor = inputVal.slice(cursorPos);
                if (!afterCursor.trim()) {
                    e.preventDefault();
                    return;
                }
            }
        }
    });

    // 兜底处理粘贴或其他方式输入的非法内容
    $('body').on('input', '#test', function() {
        let val = this.value;
        // 去除首尾空格
        val = val.trim();
        // 把多个连续空格替换为单个空格
        val = val.replace(/\s+/g, ' ');
        
        // 保持光标位置，避免用户编辑体验变差
        const originalCursorPos = this.selectionStart;
        const lengthDiff = val.length - this.value.length;
        this.value = val;
        this.selectionStart = this.selectionEnd = originalCursorPos + lengthDiff;
    });
});

逻辑说明 #

• keydown事件：实时拦截无效的空格输入，比如开头空格、末尾连续空格、已有空格后的重复空格，从源头减少非法输入；
• input事件：作为兜底机制，处理用户粘贴的内容（比如 John Doe ），自动修正为符合要求的格式，同时保持光标位置，不破坏用户的编辑流程。

这样就能完美实现「仅允许姓名的名与姓中间包含单个空格，开头和末尾禁止空格」的需求啦！

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