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

Hide DIV tag until all the text fields are filled

本文关键字：文本 字段 填充 DIV 标签 隐藏      更新时间：2023-09-26

我有一个表单，其中包含名为电子邮件和密码的两个元素，在它们被填写之前，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%;
}

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

$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(); 
});

你也可以使用 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();

然后创建并启动工作线程

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

杀死工人

w.terminate();

我会这样做：

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>

相关文章：