表单内部输入框回车事件重写及form标签action="javascript:;"作用疑问

适配你现有页面结构的实现代码如下：

$(document).ready(function() {
  // 仅绑定文本输入框的按键事件，避开同ID的隐藏域
  $('input[type="text"]#input_field').on('keydown', function(e) {
    // 匹配回车键触发
    if (e.keyCode === 13 || e.key === 'Enter') {
      // 阻止默认提交行为+阻止事件冒泡到表单层
      e.preventDefault();
      e.stopPropagation();

      // 你的业务逻辑示例：同步输入值到隐藏域后弹出模态框
      const currentVal = $(this).val().trim();
      $('input[type="hidden"]#input_field').val(currentVal);
      // 替换为你实际使用的bootstrap模态框ID即可
      $('#your_modal_id').modal('show');
    }
  });
});

注意事项：

• 你当前代码里两个input的id都是input_field，属于重复ID不符合HTML规范，建议把隐藏域的id修改为input_field_hidden避免选择器异常
• 该逻辑只会拦截输入框聚焦状态下的回车键操作，其他场景下按回车仍会正常触发表单原有提交逻辑，不需要额外修改表单提交代码

这个属性是原生HTML form标签的标准用法，和ftl模板无关：

• form的action属性默认用来指定表单提交的目标地址，当值以javascript:开头时，浏览器会执行后面紧跟的JS代码
• 这里的;是JS的空语句，所以javascript:;的作用就是表单提交时执行空代码，不会跳转页面也不会刷新页面，本质是用来阻止表单默认的跳转提交行为
• 你提到的指定函数名是扩展用法，比如action="javascript:yourSubmitFunc()"就会在提交时执行对应的自定义函数，当前写法是不需要执行任何函数、仅阻止默认提交的最简写法

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