如何在 html 中制作具有指定模式 (MM/DD/YYYY) 的表单字段，该表单字段在键入两个整数后自动添加"/"

我目前有：

<input type="text" wicket:id="singleDateField" pattern="(?:(?:0[1-9]|1[0-2])[/\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[/\-. ]?30)|(?:(?:0[13578]|1[02])[/\-. ]?31))[/\-. ]?(?:19|20)[0-9]{2}"/>

但我需要在键入两个数字后添加/，然后在键入另外两个数字之后添加/，然后在输入4位数年份之后不允许再键入。我希望格式是预先确定的，这样就不需要错误消息，用户也不能键入不可接受的日期。

我希望这是合理的，我可以利用帮助！

最近http://nosir.github.io/cleave.js/在GitHub上流行。我觉得它真的很整洁！它是纯JavaScript解决方案。

您可以使用在每个版本中将由"oninput"调用的函数。在此函数中，必须在天和月之后添加斜线。为了防止多年后添加字符，请在输入中使用maxlength。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function AddSlash(input){
            var dataString=input.value; //get input value
            if(dataString[dataString.length-1]=='/')    //slash already is
                    return;
            while(dataString.indexOf('/')!=-1) //remove slash
                dataString=dataString.replace('/', '');
            var newDataString=dataString.substring(0, 2);  //copy days
            if(dataString.length>2) //add slash after days
            {
                newDataString+='/';
                newDataString+=dataString.substring(2, 4);  //copy months
                if(dataString.length>4) //add slash after months
                {
                    newDataString+='/';
                    newDataString+=dataString.substring(4, 8); //copy years
                }
            }
            input.value=newDataString;  //change input text
        }
    </script>
</head>
<body>
    <form>
        <input id="dataInput"
            oninput="AddSlash(this)"
            maxlength="10" 
            pattern="^(?:(?:31(/)(?:0[13578]|1[02]))1|(?:(?:29|30)(/)(?:0[1,3-9]|1[0-2])2))d{4}$|^(?:29(/)(?:02)3(?:(?:d{2}(?:0[48]|[2468][048]|[13579][26])|(?:(?:[2468][048]|[13579][26])00))))$|^(?:0[1-9]|1d|2[0-8])(/)(?:(?:0[1-9])|(?:1[0-2]))4d{4}$" />
    </form>
</body>
</html>

相关内容

最新更新

热门标签：