jQuery中通过正则在keyup事件控制按钮禁用/启用（排除功能键）

你的问题出在只校验了输入框的内容，没区分按下的是有效字符还是功能键。当按下Ctrl、Alt这类功能键时，输入框内容不会改变，之前的有效内容会让正则匹配通过，导致按钮被错误启用。

要在不使用keycode、仅保留keyup事件的前提下解决，我们可以同时校验当前按下的键和输入框整体内容：

• 用正则判断按下的键是否属于允许的范围（a-z/A-Z/0-9或指定特殊字符），功能键的e.key值是"Control"、"Alt"这类字符串，不会匹配我们的正则。
• 如果是功能键，直接禁用按钮；如果是有效字符，再检查输入框内容是否全部符合规则，符合则启用按钮，否则禁用。

修改后的代码如下：

<div class="settings_tab">
<input type="text" id="myInput1">
<button type="button" id="myButton" disabled>Submit</button>
</div>

<script type="text/javascript">
$(document).on('keyup', '#myInput1', function (e) {
    const value = $(this).val();
    // 匹配单个允许的字符（包含空格）
    const singleCharRegex = /^[ A-Za-z0-9_@./#&+-]$/;
    // 匹配整个输入框内容是否全为允许的字符
    const fullValueRegex = /^[ A-Za-z0-9_@./#&+-]*$/;
    
    // 先判断当前按下的键是否是功能键
    if (!singleCharRegex.test(e.key)) {
        $('#myButton').prop('disabled', true);
        return;
    }
    
    // 再检查输入框整体内容是否合法
    const isMatch = fullValueRegex.test(value);
    $('#myButton').prop('disabled', !isMatch);
});

$('#myButton').on('click',function () {
    $('#myButton').prop('disabled', true);
});
</script>

这样调整后，按下Ctrl、Alt等功能键时，按钮会保持禁用状态；只有按下允许的字符且输入内容全部合法时，按钮才会启用。

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