在 Edge 浏览器中直接输入时间字段

Question

目前在我的网络表单上，Chrome 中的用户可以通过突出显示小时或分钟部分并使用他们的输入他们想要的值来直接在 HTML 时间字段中输入时间键盘。

当他们在 Edge 中打开同一个表单时，他们需要滚动才能找到他们 want.This 可能会感到沮丧的值，尤其是当他们有很多表单要提交并且他们必须滚动浏览所有分钟时.

有没有办法让 Edge 中的时间字段与 Chrome 中的一样？

代码如下：

<input type="time" name="departTime" id="departTime" value="<?php echo $departTime ?>">

Answer 1

这是一个 known issue with Edge，Edge 处理 Date/Time input 的更广泛方式的一部分。

2018年5月17日，微软正式将其归类为未修复：

Currently, we do not plan to release a fix for this problem. We are considering a solution for a future build.

Answer 2

我已经使用 MS Edge 对其进行了测试，并且能够产生该问题。这可能是某种错误或者是 Edge 默认行为。

作为解决方法，我建议您可以尝试使用文本输入法输入值，然后使用 JavaScript 或 JQuery 插件来屏蔽输入的值。

示例代码如下：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<input type="text" id="endTime" placeholder="HH:MM:SS">
<script>
    $(function () {

        $('input[id$="endTime"]').inputmask(
            "hh:mm:ss", {
                placeholder: "HH:MM:SS",
                insertMode: false,
                showMaskOnHover: false,
                hourFormat: 12
            }
        );
    });
</script>

结果是这样的（使用 Microsoft Edge 浏览器）：

此外，由于最新版本的 Microsoft Edge 是基于 Chromium 的，因此日期或时间类型输入在该版本中效果很好，您可以尝试使用它们。您可以从 here.

下载它们

在 Edge 浏览器中直接输入时间字段

Direct entry for time field in Edge browser

html

time

microsoft-edge