原生简单的input提示消息显示

最新推荐文章于 2023-09-04 11:40:09 发布

丶久友

最新推荐文章于 2023-09-04 11:40:09 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏：登录注册表单类

本文链接：https://blog.youkuaiyun.com/weixin_44614772/article/details/90341252

登录注册表单类专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input">
    <p id="d1" style="color:red;display: none">输入不能超过十个</p>
    <script>
        var d1=document.getElementById("d1");
        var input=document.getElementById('input');
        var state={
            value:'',
            er:false
        }
        var setState=function(newState){
            state={
                ...state,
                ...newState
            }
            rander();
        }
        rander=function(){

            input.value=state.value;
            if(state.er){
                d1.style.display='block'
            }else{
                d1.style.display='none'
            }
        }
        handle=function(value){
            if(value.length<10){
                setState({
                    value:value,
                    er:false
                })
            }else{
                setState({
                    er:true
                })
            }
        }
        input.addEventListener('input',function(){
            handle(this.value);
        })
    </script>
</body>
</html>