输入格式

Question

I'm using an input type="number" to allow users to put a duration time on a post. The format is days hours:minutes:seconds as the backend provides the format.

What I need to do is to give that format to the input. Is this possible?

Answer 1

You can use input type text with pattern:

 <form> <input type="text" pattern="^\\d{1,3} \\d{1,2}:\\d{1,2}:\\d{1,2}$" placeholder="days hours:minutes:seconds"/> <input type="submit"/> </form> 

It will validate the text using 1-3 digits for days and 1-2 for hours minutes and seconds.

You can also restrict typing of no digits and colons and space using jQuery:

 $(function() { $('input').keydown(function(e) { console.log(e.which); if (!((e.which >= 48 && e.which <= 57) || (e.which == 186 && e.shiftKey) || e.which == 32)) { return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" pattern="^\\d{1,3} \\d{1,2}:\\d{1,2}:\\d{1,2}$" placeholder="days hours:minutes:seconds"/> <input type="submit"/> </form> 

Answer 2

If you have jQuery , then take a look at:

http://jonthornton.github.io/jquery-timepicker/

Answer 3

你也可以使用

<input type="datetime">