Question

即时通讯正考虑如何更改输入提交按钮的颜色，当所有输入都已填写完毕时，是否有人知道这一点？

我猜你可以使用php吗？

更新我尝试了这个，但是它有点儿，它在我按退格键几次之前没有真正更新。：

    $(function() {
     $('form input[type=text], form input[type=email]').keydown(function() {
        var empty = false;

        // kører igennem alle inputs, og tjekker om de indeholder noget
        $('form input[type=text], form input[type=email]').each(function() {
            if ($(this).val() == '') { // hvis feltet er tomt
                empty = true;
            }
        });

        if (!$('form input[type=checkbox]').is(':checked')) {
            empty = true;
        }

        if (empty == false) {
            // hvis alle felter er udfyldt
            $('form input[type=submit]').css('background-color', 'blue');
        } else {
            // hvis ikke alle felter er udfyldt
            $('form input[type=submit]').css('background-color', 'yellow');
        }
     });
    });

Answer 1

Javascript，而不是PHP。 PHP仅在服务器端，这意味着当您看到网页时，所有PHP都已运行。

查看jquery - http://www.w3schools.com/jquery/jquery_dom_set.asp

Answer 2

检查我的小例子

<html>
<head>


    <script type="text/javascript">
        function check(){
            var tocheck = ["text1", "text2", "text3", "email"];
            var tf = document.getElementById("theform");
            var ok = true;
            var i;
            for(i=0; i<tocheck.length; i++){
                ok = ok && tf.elements[tocheck[i]].value != "";
            }
            document.getElementById("subm").style.color = ok ? "green" : "red";
        }
    </script>
</head>


<body>

    <form id="theform">
        Text1: <input name="text1" type="text" onchange="check()" oninput="check()"></input><br/>
        Text2: <input name="text2" type="text" onchange="check()" oninput="check()" onchange="check()" oninput="check()"></input><br/>
        Text3: <input name="text3" type="text" onchange="check()" oninput="check()"></input><br>
        Email: <input name="email" type="email" onchange="check()" oninput="check()"></input><br/>
        <input type="submit" id="subm" value="OK" style="color: red;"></input>
    </form>

</body>
</html>

Answer 3

我的一位朋友，找到了一个很好的解决方案！

   <script type="text/javascript">
        $(function() {
            function check_inputs() {
                var empty = false;

                // kører igennem alle inputs, og tjekker om de indeholder noget
                $('form input[type=text], form input[type=email]').each(function() {
                    if ($(this).val() == '') { // hvis feltet er tomt
                        empty = true;
                    }
                });

                if (!$('form input[type=checkbox]').is(':checked')) {
                    empty = true;
                }

                if (empty == false) {
                    // hvis alle felter er udfyldt
                    $('form input[type=submit]').css({
                                                    'background-color' : '#f4d24b',
                                                    'font-size' : '16px',
                                                    'font-weight' : '700',
                                                    'color' : '#272727',
                                                    });
                } else {
                    // hvis ikke alle felter er udfyldt
                    $('form input[type=submit]').css('background-color', '#1f1f1f');
                }
            }

            $('form input[type=text], form input[type=email]').keyup(function() {
                check_inputs();
            });

            $('form input[type=checkbox]').click(function() {   
                check_inputs();
            });
        });
    </script>

Answer 4

<!DOCTYPE html> <html> 
    <head> 
        <title>Login</title> 
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
        <script src="jquery.min.js"</script> 
        <style> 
            .btn,.input-radius {border-radius:1px!important;} 
            p { font-weight: bold; padding-top: 47px; } #sub{ } 
        </style> 
        <script> 
            jQuery(document).ready(function (){ 
                jQuery("#sub").click(function(){ btncolor(); }); 
                    function btncolor(){ 
                    if (jQuery('#exampleInputPassword1').val().length > 0 || jQuery('#exampleInputEmail1').val().length > 0) { jQuery("#sub").css("background-color", "orange"); 
                    } 
                }
            }); 
        </script> 
    </head> 
    <body>
        <div class="col-lg-3">
            <form> 
                <p>LOGIN</p> 
                <fieldset class="form-group">
                <input type="email" class="form-control input-radius" id="exampleInputEmail1" placeholder="Enter email">
                </fieldset> 
                <fieldset class="form-group"> 
                <input type="password" class="form-control input-radius" id="exampleInputPassword1" placeholder="Password"> 
                </fieldset> 
                <button type="submit" id="sub" class="btn btn-primary grey-btn" onclick="return false;">Submit</button> 
                <small class="text-muted">Forgot password?</small>
            </form>
        </div>
    </body>
</html>

制作提交按钮，在填写所有输入时更改颜色

4 个答案: