在 octoberCMS 的 datepicker 中手动输入日期后禁用保存表单

【问题标题】：Disable saving a form after manualy enter a date in datepicker in octoberCMS在 octoberCMS 的 datepicker 中手动输入日期后禁用保存表单
【发布时间】：2021-01-28 14:19:08
【问题描述】：

当我在后端表单上使用 datepicker 小部件并且用户手动输入日期时，在该字段中按 enter 时会保存表单；有什么办法可以禁用这种行为？

我的 yaml 文件

fields:
    field_1:
        label: field_1
        type: text
        span: storm
        cssClass: col-xs-4
        attributes:
            tabindex: 1
    field_2:
        label: field_2
        type: text
        span: storm
        cssClass: col-xs-4
        attributes:
            tabindex: 2
    date:
        label: 'date, don't press enter!'
        mode: date
        type: datepicker
        span: storm
        cssClass: col-xs-4
        attributes:
            tabindex: 3

【问题讨论】：

标签： forms datepicker save octobercms

【解决方案1】：

您必须在 javascript 中执行此操作。

您可以通过几种方式包含 javascript - 我的首选选项是在您的 fields.yaml 中定义一个部分并将 javascript 放入部分中。您也可以直接在 plugins/foo/bar/controllers/baz/ 的 create.htm 和/或 update.htm 文件中包含 javascript

这样的事情会起作用：

$('form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

请注意，更改表单和击键的工作方式是不受欢迎的 - 浏览器、屏幕阅读器等的默认行为假定按 Enter 将提交表单。我建议您仅在您可以将这些信息传递给一小部分用户的情况下进行此更改（或者只是告诉他们在他们想要提交表单之前不要按 Enter）。

【讨论】：