Question

是否可以在类型为“ 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类：

<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时间类型和占位符

1 个答案: