HTML中的自定义输入掩码

Question

我想使用自定义掩码（如--day/--night和用户替换-仅使用数字）生成文本的输入类型。 有什么建议吗？ 请帮我在这里。

duration: --day/--night

Answer 1

使用两个输入效率更高。

但是，如果您真的想这样做，可以的。 每次用户输入字符时，您都需要检查输入值，并将值格式化为所需的格式。 您还可以使用selectionStart和selectionEnd属性来操纵光标位置。

还有许多用于输入的遮罩插件。 http://plugins.jquery.com/tag/mask/

Answer 2

您可以执行以下操作：

创建一个占位符“-”，供用户在其中写入内容。这是我的简短示例：

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

Answer 3

Telerik提供了其“ Kendo UI” JavaScript代码的免费版本。 这是您想要的示例： http : //demos.telerik.com/kendo-ui/maskedtextbox/index

这是免费代码： http : //www.telerik.com/download/kendo-ui-core

这是托管在Github上的蒙版输入代码： https : //github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js

Answer 4

编写这种类型的代码非常困难，但是您可以将这种代码用于这种格式。

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

jQuery代码

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

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

看到codepen链接点击这里