输入框按下回车键无法正常提交表单的问题求助

我有一个集成了日历组件的表单，其中日期输入框存在异常：按下回车键时，表单未触发提交，焦点反而切换到日历图标上。我尝试将提交按钮的type改为submit和button，问题仍未解决。此外，我发现tal:replace结构调用了Python文件中的如下代码段，移除其中的onfocus属性后，问题依旧存在。请提供解决方案，使输入框按下回车键时能正常提交表单。

HTML表单代码 #

<form id="form" name="form" action="process">
      <div class='row' tal:condition="python:op in ['search', 'add', 'view']">
        <div style="width: 5em;"><label for="date">Date</label></div>
        <div tal:content="structure python:container.util.getDateTimeInputsA11y(form_name='form', my_date=DateTime().strftime('%m-%d-%Y'), date_field='date',type_date=0, date_arrows=1, use_clear='yes')"></div>
      </div>
      <div class='row first_child' tal:condition="python:op in ['add']">
        <div><label for="time">Time</label></div>
        <div><input type="text" id="time" name="time" tal:attributes="value   python:DateTime(fix_date).strftime('%H%M')" maxlength="4" nofocus="1" /></div>
      </div>
      <div class='row first_child' tal:condition="python:op in ['search', 'add', 'unit']">
        <div><label for="unit">Unit</label></div>
        <div><a tal:define="opt_select_cond python:'unit.patients=\'Y\'';"
                tal:replace="structure python:container.util.getUnitSelects(my_form='form', my_var='unit', my_var_value=unit, unit_type='sch_unit', text_input=1, multiunit=0, opt_select_cond=opt_select_cond)" /></div>
      </div>
      <div class='row first_child' tal:condition="python:op in ['add', 'edit']">
        <div><label for="room">Room</label></div>
        <div><input type="text" id="room" name="room" tal:attributes="value   python:str(bed.get('room') or '').strip();" /></div>
      </div>
      <div class='row first_child' tal:condition="python:op in ['add', 'edit']">
        <div><label for="bed">Bed</label></div>
        <div><input type="text" id="bed" name="bed" tal:attributes="value    python:str(bed.get('bed') or '').strip();" /></div>
      </div>
      <div>
        <div>
          <input type="hidden" id="op" name="op" tal:attributes="value   python:op;" />
          <input type="hidden" id="bed_id" name="bed_id" tal:attributes="value   python:int(request.get('bed_id') or 0);" />
          <input type="button" class="btn btn-light" id="submit_btn" tal:attributes="value python:op.title();" />
        </div>
      </div>
    </form>

Python代码段 #

print """
      <input type="%s" name="%s" id="%s" aria-label="%s" class="uppercase" value="%s"
      onfocus="this.select();"%s size="10" maxlength="10">
      """ % (test(text_input,'text','hidden'), my_var, my_var, my_var_title, my_var_value, test(onchange, ' onchange="%s"'%(onchange), ''))

1. 修正提交按钮类型 #

当前提交按钮为type="button"，这类按钮不会触发表单的默认提交行为，将其改为type="submit"：

<input type="submit" class="btn btn-light" id="submit_btn" tal:attributes="value python:op.title();" />

2. 拦截日期输入框的回车事件 #

日历组件可能绑定了回车事件，导致焦点跳转而非提交表单。给日期输入框添加键盘事件监听，手动触发表单提交：

document.getElementById('date').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认的焦点切换行为
    document.getElementById('form').submit(); // 手动提交表单
  }
});

3. 排查日历组件的内置事件 #

如果使用第三方日历组件，检查其文档或源码，确认是否存在回车时切换焦点的内置逻辑。可以通过修改组件配置禁用该行为，或者覆盖其事件处理函数。

4. 检查表单的提交阻止逻辑 #

排查页面中是否有其他JavaScript代码监听了表单的submit事件并调用e.preventDefault()，导致表单无法提交。可通过浏览器开发者工具的事件监听器面板查看相关绑定。

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