HTML 中的自定义输入掩码

Custom input mask in HTML

本文关键字：输入 掩码 自定义 HTML      更新时间：2023-09-26

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

duration: --day/--night

使用两个输入的效率要高得多。

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

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

您可以执行以下操作：

创建一个占位符"--"，用户可以在其中写入内容。下面是一个简短的例子，我的意思是：

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

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

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

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

j查询代码

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

查看代码笔链接单击此处

相关文章：