我可以在 <input type="time"/> 中使用占位符吗答案

【问题标题】：Can I use placeholder in <input type="time"/>我可以在 <input type="time"/> 中使用占位符吗
【发布时间】：2022-04-30 03:55:45
【问题描述】：

我可以在<input type="time"/>中使用占位符

【问题讨论】：

标签： html

【解决方案1】：

如果您向输入添加 id 或类，您可以使用 :before 将文本添加到输入 type="time" 字段。

例如：

HTML：

<input type="time" id="timepicker">

CSS：

#timepicker:before {
content:'Time:';
margin-right:.6em;
color:#9d9d9d;
}

【讨论】：

刚试过这个方法，但是即使选择了一个值，输入仍然会显示“时间：”。有什么办法克服这个问题吗？

【解决方案2】：

占位符不适用于输入类型时间，但您可以预填充数据。

Just time:
<input type="time" value="13:00" step="900">

【讨论】：

【解决方案3】：

是的，你可以

占位符属性指定一个简短的提示，描述输入字段的预期值

它取决于浏览器对

的行为

<input type="time"/>

例如铬显示

--:-- --

默认但firefox显示你设置的占位符值

在这里查看：

jsfiddle

【讨论】：

firefox 也显示 --:-- 所以不再是这种情况了

【解决方案4】：

理想情况下你不能。但如果你这样做，它在 IE 和 firefox 浏览器中将无法工作，因为它们不支持<input type="time">。因此，它们将被视为 <input type="text"> 以及您提供的占位符。

    http://www.w3schools.com/html/html5_form_input_types.asp

【讨论】：

【解决方案5】：

Placeholder 在输入时间内不起作用，但你可以通过 this 实现与 placeholder 相同的功能

input[type="time"] {
    background: #fff;
    min-width: 150px;
}

input[type="time"]:before {
    content: 'HH:mm ss';
    color: #9d9d9d;
    position: absolute;
    background: #fff;
    width: 70px;
}

input[type="time"]:focus:before {
    width: 0;
    content: '';
}

<h1>The placeholder for input time</h1>
<input type="time">

【讨论】：

【解决方案6】：

我建议将焦点上的输入类型从文本更改为时间。是的，这是一个有点hacky的方式，但它有效。应用正确的样式，你会得到结果

Just time:
<input type="text" placeholder="Demo time" step="900" onfocus="this.type='time'">

主要区别在于，在这种情况下，必需的属性用于能够使用 css 选择器

input[type="time"]:not(:valid):before {
  content:'Time:';
  margin-right:.6em;
  color:#9d9d9d;
}

&lt;input type="time" required /&gt;

【讨论】：

【解决方案7】：

小css技巧：P

input[type="time"] {
    background: #fff;
    height:30px;
    min-width: 150px;
}

input[type="time"]:before {
    content: 'My Placeholder';
    color: #9d9d9d;
    position: absolute;
    background: #fff;
    height: 18px;
}

input[type="time"]:hover:before {
    content: '';
}

&lt;input type="time"  /&gt;

【讨论】：