【问题标题】:Where did the clear button go on date type input elements in Chrome?Chrome 中日期类型输入元素上的清除按钮在哪里?
【发布时间】:2020-09-19 22:06:28
【问题描述】:

直到上周四,日期类型的输入元素旁边还有一个清除按钮(十字或“x”)。

现在看起来像这样:

有谁知道发生了什么变化?我怎样才能恢复清除按钮?

我们使用 Angular 和 Chrome 作为浏览器。

下面的 HTML 代码显示了问题(使用 Chrome 时):

<label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime">

【问题讨论】:

  • 请提供代码,以便我们解决您的问题。我们需要一个minimal, reproducible example
  • 将以上内容另存为 HTML 并在 Chrome 中打开
  • 您使用的是哪种浏览器?
  • 正如我在开始时所说的,这仅在 28/05/2020 发生了变化。到目前为止,它在 Chrome 中有一个清除按钮。我正在尝试找出发生了什么变化。

标签: html google-chrome date input


【解决方案1】:

它被报告为一个错误:

https://bugs.chromium.org/p/chromium/issues/detail?id=1087490#c1

https://bugs.chromium.org/p/chromium/issues/detail?id=1087501

bug 讨论中的某个人提出了一种解决方法:添加一个按钮来清除 date-local 元素值:

<input id=el type=datetime-local value="2025-07-01T12:44">
<button onclick="javascript:el.value=''">X</button>

https://jsfiddle.net/cxpt4r8b/

【讨论】:

  • 我同意 Ryan 的观点,这似乎是 Firefox 也应该采用的干净解决方案。添加自定义清除元素会增加溢出,并且上面的解决方法示例需要 CSP unsafe-inline for script-src,我认为应该不惜一切代价避免。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-26
  • 2015-12-14
  • 2019-06-23
  • 2019-11-26
  • 2018-05-02
相关资源
最近更新 更多