html5 时间类型和占位符

Question

有没有办法在 type="time" 的文本框中设置占位符？现在它显示时间输入格式，如 --:-- 但我想显示 "Start Time" 和 "End time" （在文本框内，而不是在外部标签上）

<asp:TextBox ID="StartingHour" Type="time" runat="server" placeholder="Start Time" required="required" />

这表明 --:--

谢谢

Answer 1

placeholder 属性设置取决于客户端浏览器如何使用 <input type="time" />，但如果您想在用户未选择输入控件时显示占位符，您可以尝试以下解决方法：

ASPX

<asp:TextBox ID="StartingHour" runat="server" placeholder="Start Time" required="required" />

JS (jQuery)

// when getting focus
$('#<%= StartingHour.ClientID %>').focus(function () {
    $(this).attr('type', 'time'); 
});

// when losing focus
$('#<%= StartingHour.ClientID %>').focusout(function () {
    $(this).attr('type', 'text'); 
});

注意：控件EndingHour的占位符也可以用同样的方法

JSFiddle Example

更新 1：

如果你想使用普通前缀（如txtHour）来输入控件，你可以将ClientID模式设置为Static并使用前缀作为选择器：

<asp:TextBox ID="txtHour1" runat="server" ClientIDMode="Static" placeholder="Time" required="required" />

<asp:TextBox ID="txtHour2" runat="server" ClientIDMode="Static" placeholder="Time" required="required" />

JS (jQuery)

// when getting focus
$('input[id^="txtHour"]').focus(function () {
    $(this).attr('type', 'time'); 
});

// when losing focus
$('input[id^="txtHour"]').focusout(function () {
    $(this).attr('type', 'text'); 
});

或使用分配给所有相关文本框控件的共享 CSS class：

<asp:TextBox ID="txtHour1" runat="server" CssClass="hour" placeholder="Time" required="required" />

<asp:TextBox ID="txtHour2" runat="server" CssClass="hour" placeholder="Time" required="required" />

JS (jQuery)

// when getting focus
$('.hour').focus(function () {
    $(this).attr('type', 'time'); 
});

// when losing focus
$('.hour').focusout(function () {
    $(this).attr('type', 'text'); 
});

类似问题：Can I use placeholder in <input type="time"/>

html5 时间类型和占位符

html5 time type and placeholder

html

asp.net

textbox

placeholder