jQuery监听keyup按S键提交表单时如何避免S字符写入输入框

keyup 事件触发时机太晚，键盘操作的完整执行顺序为：

• 触发 keydown 事件
• 触发 keypress 事件
• 浏览器将按下的字符写入输入框
• 触发 keyup 事件

在keyup回调里调用event.preventDefault()时，S字符早就已经被插入到文本框中了，这个方法只能拦截当前触发事件的默认行为，对已经执行完成的字符录入操作无效，所以提交的值末尾总会带多余的S。

推荐方案：监听keydown事件拦截 #

在字符还没写入输入框的keydown阶段做判断和拦截，是体验最好、逻辑最严谨的实现，不会有字符闪入输入框的问题：

$(document).ready(function() {
  $('.btnsub').keydown(function(event) {
    // 匹配按下S键（keyCode为83），排除Ctrl/Alt/Shift等组合键场景，避免误拦截系统快捷键
    if (event.which === 83 && !event.ctrlKey && !event.altKey && !event.shiftKey) {
      event.preventDefault(); // 此时拦截可以有效阻止S字符写入输入框
      $('#insertEntryy').click();
    }
  });
});

对应的HTML部分不需要修改，保持原有结构即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="blabla">
<input type="text" class="btnsub">
<button id="insertEntryy" type="button">
asd
</button>
</form>

备选方案：keyup阶段手动移除多余字符（不推荐） #

如果因为业务逻辑必须使用keyup事件，可以在触发提交前手动删掉输入框末尾刚输入的S，但这个方案会出现S字符短暂出现在输入框又消失的闪屏问题，体验较差：

$(document).ready(function() {
  $('.btnsub').keyup(function(event) {
    if (event.which === 83) {
      // 移除最后一位输入的S字符
      $(this).val($(this).val().slice(0, -1));
      $('#insertEntryy').click();
    }
  });
});

修改完成后，按下S键会直接触发表单提交，文本框内不会录入本次按下的S字符，提交的表单值也不会携带多余字符。

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