Question

我决定使用文本框来获取用户的出生日期，我正在尝试制作此文本框，因此它将用户输入限制为DD / MM / YYYY，我想要得到的就是那个斜杠（/）固定在文本框中。用户不希望类型为“/”，所以我试图在文本框中修复它

这就是我想要实现的目标

| ____ / ____ / ___ |

到目前为止，我的代码只是一个基本的文本框，但无论如何

<label for="title">Date of Birth</label>
<input type="text" name="dateofbirth" id="dateofbirth">
</div>

Answer 1

使用HTML5，您只需使用日期输入类型：

＆＃13;

<input type="date" name="dateofbirth" id="dateofbirth">

＆＃13;

这是MDN参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Answer 2

我认为这就是你要找的东西：

How to do date masking using javascript (without JQuery)?

如果您查看Pratik Shah的回答，那就是您正在寻找的格式，它似乎有效。

代码：

<input
    type="text"
    name="date"
    placeholder="dd/mm/yyyy"
    onkeyup="
        var v = this.value;
        if (v.match(/^\d{2}$/) !== null) {
            this.value = v + '/';
        } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
            this.value = v + '/';
       }"
    maxlength="10"
>

适用于我的Firefox 52.0.2

希望它有所帮助。

Answer 3

这可能就是你要找的东西。

<input type="date" name="dateofbirth" id="dateofbirth">

请记住，这在某些浏览器中无效 - Firefox和旧的IE版本。

Answer 4

您可以尝试使用jQuery的maskedInput插件。它基本上就是你要找的东西。 https://github.com/digitalBush/jquery.maskedinput

如何格式化出生日期的文本框

4 个答案: