如何仅在所有字段填满时启用按钮并支持回车提交（Razor视图）

我看了你的代码，发现几个关键问题导致功能没正常工作，咱们一步步修复：

问题分析 #

1. jQuery引用顺序错误：SignalR依赖jQuery，但你把jQuery放在了SignalR之后，这会直接导致SignalR无法初始化。
2. 选择器错误：比如第一个keyup事件里用了$("#textarea")，但你的文本域实际ID是yourMessage；第二个事件里的fname没加#选择器，无法正确匹配输入框。
3. 重复且错误的字段检查逻辑：第一个事件里重复检查同一个文本域，完全没关联fname输入框；回车键提交的逻辑也没和按钮禁用状态同步。
4. 代码语法错误：你的自执行函数没放在<script>标签内，会直接触发语法报错。

修正后的完整代码 #

<!-- 先引用jQuery，再加载SignalR相关脚本，确保依赖顺序正确 -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="~/signalr/js"></script>
<script src="~/Scripts/SignalR.js"></script>

<script type="text/javascript">
(function() {
    // 初始化SignalR Hub
    var myHub = $.connection.myHub;

    // 提取复用的字段检查函数，统一判断两个字段是否有效（去除前后空格后非空）
    function areFieldsValid() {
        var userName = $.trim($("#fname").val());
        var userMessage = $.trim($("#yourMessage").val());
        return userName !== "" && userMessage !== "";
    }

    // 监听两个输入框的keyup事件，实时更新按钮启用/禁用状态
    $("#fname, #yourMessage").keyup(function() {
        if (areFieldsValid()) {
            $("#send").removeAttr('disabled');
        } else {
            $("#send").attr('disabled', 'disabled');
        }
    });

    // 监听回车键提交，仅当字段有效时触发按钮点击
    $("#fname, #yourMessage").keyup(function(e) {
        if (areFieldsValid() && e.which === 13) {
            $('#send').trigger('click');
        }
    });

    // 按钮点击事件：这里可以添加发送到SignalR Hub的逻辑
    $("#send").click(function() {
        var userName = $.trim($("#fname").val());
        var userMessage = $.trim($("#yourMessage").val());
        // 调用SignalR Hub方法示例：myHub.server.sendMessage(userName, userMessage);
        console.log(`提交内容：用户名=${userName}，消息=${userMessage}`);
    });
})();
</script>

<style>
.button {
    text-decoration: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    outline: 0;
    display: inline-block;
    margin-right: 2px;
    border-radius: 12px;
    background-color: blue;
    opacity: 1;
}
.button-blue {
    background-color: #3498db;
}
.button-blue:hover {
    background-color: #2980b9; /*  hover时加深颜色，提升交互反馈 */
}
.button-blue:active {
    color: white; /* 修正:active时的文字颜色，避免和背景色重合 */
    background-color: #2980b9;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button:disabled {
    opacity: 0.6;
    pointer-events: none;
}
</style>

<h1>Hello!</h1>
<form action="" method="post" id="subscribe" name="subscribe">
    First name: <input type="text" name="fname" id="fname" placeholder="Name" required autofocus><br>
    <div id="message"></div>
    Your Message:<br>
    <textarea id="yourMessage" placeholder="Start Typing..." required></textarea><br />
    <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" />
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />

关键修改点说明 #

• 调整脚本顺序：把jQuery放在最前面，确保SignalR能正常加载初始化。
• 复用检查逻辑：创建areFieldsValid()统一处理字段有效性判断，避免重复代码，保证按钮状态和回车键逻辑一致。
• 修正选择器：所有元素选择器都使用正确的ID选择器（比如#fname、#yourMessage）。
• 修复CSS细节：调整按钮hover和active状态的颜色，避免文字不可见的问题。
• 完善代码结构：把JS逻辑放在正确的<script>标签内，修复语法错误。
• 添加按钮点击逻辑示例：补充了按钮点击后的处理代码，方便你对接SignalR Hub。

这样修改后，按钮会在两个字段都填写（去除前后空格后非空）时自动启用，回车键也只会在字段有效时触发提交操作。

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