Question

我想根据文本框中文本的长度显示和隐藏文本。我试过以下代码。但它不起作用。帮助我。

<!DOCTYPE html>
<html>
<head>
    <script>
        function myFunction()
        {
            var x=document.getElementById("fname");
            if(x.length<1)
                document.getElementById("lname").style.visibility = 'visible';
            else
                document.getElementById("lname").style.visibility = 'hidden';

        }
    </script>
</head>
<body>

    Enter your name: <input type="text" id="fname" onchange="myFunction()">

    <div id="lname" style="visibility:hidden">hey im printing</div>

</body>
</html>

Answer 1

您应该检查输入值长度：

var x=document.getElementById("fname");
if(x.value.length<1)

Answer 2

使用此

var x=document.getElementById("fname").value;

将值分配给var x。

Answer 3

试试这个

function myFunction()
{
   var x=document.getElementById("fname").value;
   if(x.length>=1)
   {
      document.getElementById("lname").style.visibility="visible";
   }
   else
     document.getElementById("lname").style.visibility = 'hidden';
}

DEMO

Answer 4

试试这个。

<input type="text" id="fname" onkeyup="myFunction()">
<div id="lname" style="visibility:hidden">hey im printing</div>

function myFunction()
{ 

       var x=document.getElementById("fname");
       if(x.value.length>0){
          document.getElementById("lname").style.visibility = 'visible';
        }else{
           document.getElementById("lname").style.visibility = 'hidden';
        }

}

<强> Working DEMO

Answer 5

使用jquery

进行检查

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<script>
function myFunction()
{

//  var x=document.getElementById("fname").val();
var x=$("#fname").val();
    alert(x.length)
if(x.length < 1) {
    alert('if');
        $("#lname").css("display", "block");
}
//document.getElementById("lname").style.visibility = 'visible';
else {
    $("#lname").css("display", "none");
}

}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">

<div id="lname" style="display:none">hey im printing</div>

</body>
</html>

根据条件隐藏Javascript可见性

5 个答案: