隐藏 DIV 标签，直到所有文本字段都填满

Question

我有一个表单，其中包含两个名为 email 和 password 的元素，在填充它们之前，将隐藏 div 中的提交。 下面是我的脚本，但它不起作用：

<button id="sign_in_button" class='upperbutton' data-role="none" hidden="inline"></button>

查询

$(document).ready(function() {
    var $input = $('#email,#password')
    $input.keyup(function() {
        var trigger = false;
        $input.each(function() {
            if (!$(this).val()) {

            }
        });
        $("#sign_in_button").fadeIn();
    });
});

CSS

.upperbutton {
    position:absolute;
    top:5px;
    width:80px;
    height:30px;
    border:none;
    background-color:#2797bf;
    background-image:url(imgs/checkmark.png);
    background-repeat:no-repeat;
    color:#FEFEFE;
    left:90%;
}

Answer 1

您可以检查填充输入的数量并与总输入计数进行比较。

$input.on('keyup'function() {
    var trigger = false;
    filled = $input.filter(function() {
        return this.value.length; 
    }).length;
    if(filled == $input.length)
       $("#sign_in_button").fadeIn(); 
    else 
       $("#sign_in_button").fadeOut(); 
});

Answer 2

您也可以使用 javascript Workers 对象。

首先检查浏览器是否接受工作人员。

if(typeof(Worker) !== "undefined") {
    // Yes! Web worker support!
    // Some code.....
} else {
    // Sorry! No Web Worker support..
}

然后用js函数创建一个脚本。

function checkAllFilled() {
    // Code for check all your inputs
}

checkAllFilled();

然后创建并启动Worker

if(typeof(w) == "undefined") {
    w = new Worker("check_inputs.js");
}

杀死工人

w.terminate();

Answer 3

我会这样做：

 function checkForm() { var boxes = document.getElementsByClassName("myinputs"); for(var i=0; i<boxes.length; i++) { if(!boxes[i].value) { return false; } } var hidden = document.getElementById("hidencontent"); hidden.setAttribute("class", "visible"); }

 .hide { display: none; }

 <input type="text" class="myinputs" onblur="checkForm()" name="foo"> <br> <input type="text" class="myinputs" onblur="checkForm()" name="bar"> <div class="hide" id="hidencontent"> <h1> You found it! </h1> </div>