0

我直接让icon 在input上显示可以显示,但是我想一开始先不设置icon,当点击登录按钮以后,如果没有用户名,我就创建一个span标签,并且给有form-group的元素加has-warning和has-feedback,让他显示警告icon,结果腾出了icon的位置,但是并没有显示。
一开始显示icon的代码如下:

    <div class="form-group form-inline" id="form-group">
        <div class="form-group has-warning has-feedback" id="LabelUser">
            <label class="sr-only control-label" for="user">用户名</label>
            <input class="form-control" type="text" id="user" placeholder="请填写用户名">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group" id="LabelPass">
            <label class="sr-only control-label" for="pass">密码</label>
            <input class="form-control" type="password" id="pass" placeholder="请填写密码">
        </div>
        <input class="btn btn-success" type="button" id="login" value="登录">
        <input class="btn btn-warning" type="button" id="reg" value="注册">
    </div>
    

效果如图:

能显示说明路径没有错误
我想要的点击之后创建span标签的代码如下:

<body>
    <div class="form-group form-inline" id="form-group">
        <div class="form-group" id="LabelUser">
            <label class="sr-only control-label" for="user">用户名</label>
            <input class="form-control" type="text" id="user" placeholder="请填写用户名">
        </div>
        <div class="form-group" id="LabelPass">
            <label class="sr-only control-label" for="pass">密码</label>
            <input class="form-control" type="password" id="pass" placeholder="请填写密码">
        </div>
        <input class="btn btn-success" type="button" id="login" value="登录">
        <input class="btn btn-warning" type="button" id="reg" value="注册">
    </div>
    
    <!-- BootStrap -->   
    <!-- 注意,引用的东西都要在www文件夹里面,都是从www里面拿的 -->
    <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- BootStrap end -->

    <script src="ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function(){
            let oTxtUser = document.getElementById("user");
            let oTxtPass = document.getElementById("pass");
            let oBtnReg = document.getElementById("reg");
            let oBtnLogin = document.getElementById("login");
            let oLabelUser = document.getElementById("LabelUser");
            let oLabelPass = document.getElementById("fLabelPass");

            oBtnLogin.onclick = function(){
                ajax({
                    url:"/user",
                    data:{act: "login", user: oTxtUser.value, pass: oTxtPass.value},
                    type:"get",
                    success: function(str){
                        let json = eval("("+str+")");

                        if(json.ok){
                            alert("登录成功");
                        }else if(json.msg == "此用户不存在"){
                            alert("登录失败:" + json.msg);
                            // debugger;
                            //如果上一次有错,先清除上一次的oLabelUser和添加的span
                            let len = oLabelUser.getElementsByTagName("span").length;        //通过个数判断有没有span标签
                            if(len > 0){        
                                let oSpan =  oLabelUser.getElementsByTagName("span")[0];
                                oLabelUser.removeChild(oSpan);
                                oLabelUser.setAttribute("class", "form-group");
                            }

                            //给oLabelUser添加警告class
                            oLabelUser.setAttribute("class", "form-group has-warning has-feedback");

                            //创建span标签 为了显示提示标签
                            let oSpan = document.createElement("span");
                            oSpan.setAttribute("calss", "glyphicon glyphicon-warning-sign form-control-feedback");
                            oLabelUser.appendChild(oSpan);
                        }
                    },
                    error: function (){
                        alert("通信错误");
                    },
                });
            };


            oBtnReg.onclick = function(){

                ajax({
                    url:"/user",
                    data:{act: "reg", user: oTxtUser.value, pass: oTxtPass.value},
                    type:"get",
                    success: function(str){
                        let json = eval("("+str+")");
                        if(json.ok){
                            alert("注册成功");
                        }else{
                            alert("注册失败:" + json.msg);
                        }
                    },
                    error: function (){
                        alert("通信错误");
                    },
                });
            };

        };
    </script>
</body>

效果如图:

登录前:

登陆后:

可以看出来登陆后的用户名框明显长了一节,那个就是多出来的icon的地方,但是icon并没有显示出来,请问这个应该怎么改?

2个回答

0

已采纳

calss是什么鬼,typo吧?

0

oSpan.setAttribute("calss", "glyphicon glyphicon-warning-sign form-control-feedback");

改为

oSpan.className = 'glyphicon glyphicon-warning-sign form-control-feedback';

撰写答案