blocks|key|2422104|text|placeholder属性设置取决于客户端浏览器如何使用<input+type="time"+/>，但如果要在用户未选择输入控件时显示占位符，您可以尝试此解决方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2422105|ASPX|BOLD|2422106|<asp:TextBox+ID="StartingHour"+runat="server"+placeholder="Start+Time"+required="required"+/>|code-block|syntax|javascript|2422107|JS+(jQuery)|2422108|//+when+getting+focus
$('#<%25=+StartingHour.ClientID+%25>').focus(function+()+{
++++$(this).attr('type',+'time');+
});

//+when+losing+focus
$('#<%25=+StartingHour.ClientID+%25>').focusout(function+()+{
++++$(this).attr('type',+'text');+
});|2422109|注意：同样可以用来控制EndingHour的占位符。|2422110|JSFiddle+Example|2422111|更新1:|2422112|如果您想使用公共前缀(如txtHour)来输入控件，您可以将ClientID模式设置为Static，并使用前缀作为选择器：|2422113|<asp:TextBox+ID="txtHour1"+runat="server"+ClientIDMode="Static"+placeholder="Time"+required="required"+/>

<asp:TextBox+ID="txtHour2"+runat="server"+ClientIDMode="Static"+placeholder="Time"+required="required"+/>|2422114|JS+(jQuery)|2422115|//+when+getting+focus
$('input[id%5E="txtHour"]').focus(function+()+{
++++$(this).attr('type',+'time');+
});

//+when+losing+focus
$('input[id%5E="txtHour"]').focusout(function+()+{
++++$(this).attr('type',+'text');+
});|2422116|或者使用为所有相关textbox控件分配的共享CSS类：|2422117|<asp:TextBox+ID="txtHour1"+runat="server"+CssClass="hour"+placeholder="Time"+required="required"+/>

<asp:TextBox+ID="txtHour2"+runat="server"+CssClass="hour"+placeholder="Time"+required="required"+/>|2422118|JS+(jQuery)|2422119|//+when+getting+focus
$('.hour').focus(function+()+{
++++$(this).attr('type',+'time');+
});

//+when+losing+focus
$('.hour').focusout(function+()+{
++++$(this).attr('type',+'text');+
});|2422120|类似的问题：Can+I+use+placeholder+in+|2422121|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/75phkmd6/3/|1|https://stackoverflow.com/questions/23191875/can-i-use-placeholder-in-input-type-time^0|0|B|S|L|0|0|4|0|0|0|B|0|0|0|3|B|A|0|0|G|0|0|0|4|0|C|7|U|8|17|6|0|0|0|B|0|0|0|0|0|B|0|0|6|P|1|0^^$0|@$1|2|3|4|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1U|8|@$9|1V|A|1W|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1X|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1Y|8|@$9|1Z|A|20|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|21|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|22|8|@$9|23|A|24|B|H]|$9|25|A|26|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|27|8|@]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|V|3|W|5|6|7|2B|8|@$9|2C|A|2D|B|H]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|K|7|2L|8|@]|D|@]|E|$L|M]]|$1|11|3|12|5|6|7|2M|8|@$9|2N|A|2O|B|H]]|D|@]|E|$]]|$1|13|3|14|5|K|7|2P|8|@]|D|@]|E|$L|M]]|$1|15|3|16|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|17|3|18|5|K|7|2R|8|@]|D|@]|E|$L|M]]|$1|19|3|1A|5|6|7|2S|8|@$9|2T|A|2U|B|H]]|D|@]|E|$]]|$1|1B|3|1C|5|K|7|2V|8|@]|D|@]|E|$L|M]]|$1|1D|3|1E|5|6|7|2W|8|@]|D|@$9|2X|A|2Y|1|2Z]]|E|$]]|$1|1F|3|-4|5|6|7|30|8|@]|D|@]|E|$]]]|1G|$1H|$5|1I|1J|1K|E|$1L|1M]]|1N|$5|1I|1J|1K|E|$1L|1O]]]]

The <code>placeholder</code> attribute setting depends on how the client browsers behave with <code>&lt;input type="time" /&gt;</code>, but if you want to show placeholders when the user not selecting input control, you may try this workaround:

ASPX

<pre><code>&lt;asp:TextBox ID="StartingHour" runat="server" placeholder="Start Time" required="required" /&gt;
</code></pre>

JS (jQuery)

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

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

Note: The same way can be used for control <code>EndingHour</code>'s placeholder.

<a href="https://jsfiddle.net/75phkmd6/3/" rel="nofollow noreferrer">JSFiddle Example</a>

Update 1:

If you want to use common prefix (like <code>txtHour</code>) to input controls, you may set <code>ClientID</code> mode to <code>Static</code> and use the prefix as selector:

<pre><code>&lt;asp:TextBox ID="txtHour1" runat="server" ClientIDMode="Static" placeholder="Time" required="required" /&gt;

&lt;asp:TextBox ID="txtHour2" runat="server" ClientIDMode="Static" placeholder="Time" required="required" /&gt;
</code></pre>

JS (jQuery)

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

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

Or use a shared CSS class assigned for all related textbox controls:

<pre><code>&lt;asp:TextBox ID="txtHour1" runat="server" CssClass="hour" placeholder="Time" required="required" /&gt;

&lt;asp:TextBox ID="txtHour2" runat="server" CssClass="hour" placeholder="Time" required="required" /&gt;
</code></pre>

JS (jQuery)

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

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

Similar issue: <a href="https://stackoverflow.com/questions/23191875/can-i-use-placeholder-in-input-type-time">Can I use placeholder in &lt;input type=&quot;time&quot;/&gt;</a>

Is there a way to set a placeholder in a textbox that has type="time"?
Right now it shows the time input format like --:-- but I want to display like "Start Time" and "End time" (inside the textbox, not on external label)

<pre><code>&lt;asp:TextBox ID="StartingHour" Type="time" runat="server" placeholder="Start Time" required="required" /&gt;
</code></pre>

this shows --:--

Thanks

html5 time type and placeholder

jQuery

有没有办法在文本框中设置一个type=为“time”的占位符？现在它显示时间输入格式，如--:--，但我想显示“开始时间”和“结束时间”(在文本框内，而不是在外部标签上)<asp:TextBox ID="StartingHour" Type="time" runat="server" placeholder="Star...

问html5时间类型和占位符
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5时间类型和占位符EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html5时间类型和占位符
EN