Rails实现输入框输入变化时自动提交表单 无需提交按钮

完全脱离JavaScript无法实现输入即时提交的效果——HTML原生没有提供输入内容变化时自动触发表单提交的能力，下面的方案只需要极少量原生JavaScript，不需要引入jQuery，也不需要改动你现有的后端校验逻辑。

1. 修正现有表单代码 #

你原来的表单配置存在冲突：remote: true（异步无刷新提交）和local: true（整页刷新提交）不能同时生效。修正配置、给元素加唯一标识、移除提交按钮，同时给数字输入框加1位数字的原生限制：

<%# 注意把check_answer_tests_path换成你自己路由对应的路径辅助方法 %>
<%= form_with url: check_answer_tests_path, remote: true, method: 'get', id: 'answer-check-form' do |f| %>
  <%= f.number_field :answer, value: '', id: 'answer-input', min: 0, max: 9 %>
<% end %>

2. 添加原生JS实现即时提交 #

把下面的代码放到页面对应的JS文件里，或者直接写在表单下方的<script>标签中即可，不需要依赖任何第三方库：

document.addEventListener('DOMContentLoaded', () => {
  const answerInput = document.querySelector('#answer-input');
  const checkForm = document.querySelector('#answer-check-form');

  // 监听输入内容变化
  answerInput.addEventListener('input', () => {
    const inputVal = answerInput.value.trim();
    // 仅当输入为1位有效数字时才提交，避免无效请求
    if (inputVal.length === 1 && /^\d$/.test(inputVal)) {
      // 触发原生表单提交，Rails UJS会自动处理remote表单的异步请求
      checkForm.requestSubmit();
    }
  });
});

实现说明 #

• 用input事件监听比传统的keyup事件兼容性更好，键盘输入、粘贴内容、移动端软键盘输入都能准确触发
• 内置了输入值校验，只有输入合法的1位数字时才会发请求，不会产生空值、多位数的无效校验请求
• 因为保留了Rails原生的remote: true配置，你controller层的逻辑完全不需要改动，只需要正常处理请求、返回对应的js.erb模板渲染校验结果即可
• 如果不需要无刷新校验，只需要把表单的remote: true改成local: true，JS提交逻辑不需要做任何调整

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