按回车键移动下一步在html的日期字段中不起作用

Question

在 chrome 版本更新后，通过按 enter 键在 html 的日期字段中不起作用我的 google chrome 版本现在是 83.0.4103.61，当我按 Enter 时，它会显示日期选择器而不是移动到其他字段

$(document).on('keypress','#from_date',function(e){
//alert("in");
e.preventDefault();
  if(e.which == 13){
     $('#to_date').focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="form-control customInp" name="from_date" value="2020-05-20" id="from_date">
<input type="date" class="form-control customInp" name="to_date" value="" id="to_date">

Answer 1

您可以使用 enter 键上的 preventDefault 来覆盖在 enter 时打开日期选择器的新行为。

function preventDatePickerOnEnter(evt) {
  if (evt.which === 13) { // enter key
    console.log('prevented date picker on enter')
    evt.preventDefault();
  }
}

<input type="date" onkeydown="preventDatePickerOnEnter(event)">

Answer 2

Google 的聪明人设法在他们的新日期选择器中搞砸了一些东西，自 1990 年代将 INPUT 字段添加到 HTML 以来一直有效...... ENTER 键的行为。在 v82 及之前的版本中，如果您在正常表单体验（与任何其他 INPUT 一样）中输入日期时按 ENTER，则将提交表单。某些设置可能会将 ENTER 解释为移动到下一个字段（很像 TAB 键）。

从 Chrome v83 开始，ENTER 键仅打开日期选择器 UI。因此，如果用户在日期字段内，则没有本地方式来提交表单。如果这是以前 Web 上的范式，这会很好，但这会颠覆 20 多年的 Web 开发和 UX。干得好，伙计们。

欲了解更多信息，请参阅：https://developers.google.com/web/updates/2020/05/nic83 或 https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

回答 OP 的问题：是的，INPUT TYPE="date" 在 v83 中发生了显着变化，因此它不是您独有的。