代码之家 › 专栏 › 技术社区 › Gabriele Cozzolino

HTML5时间类型和占位符

placeholder textbox html5 asp.net

Gabriele Cozzolino · 技术社区 · 7 年前

是否有方法在具有type=“time”的文本框中设置占位符? 现在它显示的是时间输入格式,比如——:——但是我想显示“开始时间”和“结束时间”(在文本框内,而不是在外部标签上)

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

这表明--:--

谢谢

1 回复 | 直到 7 年前

Tetsuya Yamamoto 7 年前

这个 placeholder 属性设置取决于客户端浏览器的行为方式 <input type="time" /> ,但如果要在用户未选择输入控件时显示占位符,可以尝试以下解决方法:

阿斯克斯

<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类:

<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"/>