如何按下回车键获取表单内文本框值且不自动提交表单？

首先咱们先搞定两个核心需求：阻止回车触发表单提交，以及正确获取文本框的输入值。下面是调整后的代码和详细解释：

第一步：修改JavaScript函数 #

把你的fncValidateMemberID函数改成这样：

function fncValidateMemberID(e) {
    // 兼容不同浏览器的键盘事件键值判断
    if (e.keyCode === 13 || e.which === 13) {
        // 1. 优先阻止回车的默认表单提交行为
        e.preventDefault();
        
        // 2. 直接通过事件源获取文本框输入值（最可靠的方式）
        const inputValue = e.target.value.trim();
        
        // 3. 执行你的AJAX逻辑（这里给个示例模板）
        if (inputValue) { // 先做非空校验
            // 示例AJAX请求
            fetch('/YourController/YourAction', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                },
                body: JSON.stringify({ id: inputValue })
            })
            .then(response => response.json())
            .then(data => {
                // 处理AJAX返回结果
                console.log('请求成功:', data);
            })
            .catch(error => {
                console.error('请求出错:', error);
            });
        }
        
        // 双重保险：返回false避免表单提交
        return false;
    }
    // 非回车键正常放行
    return true;
}

关键细节说明 #

• 阻止表单提交：用e.preventDefault()直接阻断回车的默认行为（表单提交），再加上return false，双重保险避免意外提交页面。
• 获取输入值：通过e.target.value直接拿到当前触发事件的文本框内容，这比通过ID查找更靠谱——因为TextBoxFor生成的HTML元素ID可能会因为模型层级（比如嵌套模型）变成ParentModel_ID这类格式，用e.target完全不用操心这个问题。
• 兼容性处理：同时判断e.keyCode和e.which，适配不同浏览器的键盘事件属性差异。

额外优化建议（推荐） #

如果不想用内联的onkeypress（现代前端更推荐HTML与JS分离的写法），可以把内联属性去掉，改成事件监听的方式：

1. 修改TextBoxFor代码：

@Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm member-id-input", placeholder = "Enter Id" })

2. 添加事件监听（放在页面底部或DOM加载完成后）：

document.addEventListener('DOMContentLoaded', function() {
    const memberIdInput = document.querySelector('.member-id-input');
    memberIdInput.addEventListener('keypress', function(e) {
        if (e.keyCode === 13 || e.which === 13) {
            e.preventDefault();
            const inputValue = this.value.trim();
            // 这里写你的AJAX逻辑
        }
    });
});

这种方式把结构和行为分离，代码更易维护，也符合现代前端开发的最佳实践。

内容的提问来源于stack exchange，提问作者Willy David Jr