HTML中的自定义输入掩码

Question

I want to generate an input type of text with custom mask like --day/--night and user replace - just with numbers. any suggestion? Please help me out here.

duration: --day/--night

Answer 1

Using two inputs is much more efficient.

But if you really want to do this, yes you can do it. You would need to check the input value every time user inputs a character and format the value to what you would like. You can also manipulate the cursor position using selectionStart and selectionEnd properties.

There are also a number of mask plugins for inputs. http://plugins.jquery.com/tag/mask/

Answer 2

You can do following:

Make a placeholder "--" where the user can write the things in. Here is a short example what I mean:

duration: <input placeholder="--" maxlength="2">day/<input placeholder="--" maxlength="2">night

Answer 3

Telerik offer a free version of their "Kendo UI" JavaScript code. Here's an example of what you want: http://demos.telerik.com/kendo-ui/maskedtextbox/index

Here's the free code: http://www.telerik.com/download/kendo-ui-core

Here's their masked input code hosted on Github: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js

Answer 4

It is very hard to write this type of code but you can use this code for this type of formatting.

<div>
    <label for="phone">Phone</label>
    <!-- or set via JS -->
    <input id="phone" type="text" />
  </div>

jquery code

   $(":input").inputmask();

    $("#phone").inputmask({"mask": "99/99"});

see the codepen link click here