美文网首页
一个只读的最大长度为4的输入框?

一个只读的最大长度为4的输入框?

作者: 元气满满321 | 来源:发表于2017-05-02 18:58 被阅读44次

    前言

    大象装到冰箱里得几步?---三步,那想实现该输入框,让我们也分三部走

    1. 写好HTML 标签input
    2. 让input只读
    3. input输入的最大长度为4

    写好HTML 标签input

    <input type="text" id="name-input" >
    <input type="button" id="btn" value="查看效果" >
    

    让input只读

     <script>
            window.onload = function(){
                //分别获取文本输入框和按钮元素
                let name = document.getElementById("name-input");
                let btn = document.getElementById("btn");
    
                btn.onclick = function(){
                        //设置input的readOnly为true,input则为只读
                        name.readOnly = true;
                }
            }
        </script>
    

    disabled VS. readonly

    共同点:都可以设置输入框input为只读
    不同点:
    disabled :说明该input无效,及其value值不会传递给任何程序
    readonly:input只是不可编辑,但不影响值的传递

    input输入的最大长度为4

     btn.onclick = function(){
                    let length = name.value.length;
                   
                    if(length<=4){
                        name.readOnly = true;
                    }
                }
    

    会发现,只要在onclick事件里添加长度判断即可

    完整代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实现一个只读的最大长度为10的输入框</title>
        <script>
            window.onload = function(){
                let name = document.getElementById("name-input");
                let btn = document.getElementById("btn");
    
                btn.onclick = function(){
                    let length = name.value.length;
                   
                    if(length<=4){
                        name.readOnly = true;
                    }
                }
            }
        </script>
    </head>
    <body>
    <input type="text" id="name-input" >
    <input type="button" id="btn" value="查看效果" >
    </body>
    </html>
    

    每天努力一点点
    谢谢你看完


    相关文章

      网友评论

          本文标题:一个只读的最大长度为4的输入框?

          本文链接:https://www.haomeiwen.com/subject/sechtxtx.html