有关HTML 5时间类型和占位符?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (37)

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

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

谢谢

提问于
用户回答回答于

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的占位符可以使用相同的方法。

代码:https://jsfiddle.net/75phkmd6/3/

如果要使用公共前缀(如txtHour)来输入控件,可以将ClientIDmode 设置为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'); 
});

扫码关注云+社区

领取腾讯云代金券