javascript - 删除输入时javascript div消失

Question

我有一个关于以下的问题：

我有一个 div display:none。一旦用户在输入字段中输入文本（使用 jQuery show() 方法），该 div 就会出现。一切正常，但是一旦我删除输入字段中的文本，我希望 DIV 再次消失。我的尝试：

function如果输入为空，请在 jQuery函数中使用另一个hide()，但它会阻止触发使用 show() 的函数（因为默认情况下输入显然为空）。

任何想法将不胜感激！

这是我的脚本：

function password1Security()

{
var pwd1 = document.getElementById("password1");
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var pwdsft = document.getElementById("passwordSafetyLevel1");

{
if (strongRegex.test(pwd1.value)){pwdsft.innerHTML = '<span style="color:green;">Safe</span>'} else if (mediumRegex.test(pwd1.value)) 

{pwdsft.innerHTML = '<span style="color:orange;">Quite Safe</span>'} else {pwdsft.innerHTML = '<span style="color:red;">Unsafe</span>'};
}
};

function passSafetyAppear1()

{$("#passwordSafety1").show()};

function showPassSafety1()

{
password1Security();
passSafetyAppear1();
};

</script>

<input name="password1" id="password1" type="password" size="15" maxlength="20" style="width:500px; height:30px;" 

onKeyUp="showPassSafety1()"/>
<br/>

<span name="passwordSafety1" id="passwordSafety1" style="font-size:12pt; display:none;">Your password is <b 

name="passwordSafetyLevel1" id="passwordSafetyLevel1"></b>.</span><br/>

先感谢您，

皮埃尔

Answer 1

对模糊执行该操作（当输入失去焦点时）。使用这样的代码和适当的选择器来实现这一点：

$('input-selector').blur(function(){
    if(!$(this).val())
        $('div-selector').hide();
});

Answer 2

您可以按照以下方式做一些事情：jsFiddle example。

$('input').keyup(function() {
    if ($(this).val().length > 0) $('div').show();
    else $('div').hide();
});​

Answer 3

$('input-selector').keyup(function(){
        if ($(this).val().length > 0)
           $('div-selector').show();
        else
           $('div-selector').hide();
});

试试...