Javascript 如何在文本框模糊事件中隐藏元素并在焦点上再次显示_Javascript

Javascript 如何在文本框模糊事件中隐藏元素并在焦点上再次显示

javascript

Javascript 如何在文本框模糊事件中隐藏元素并在焦点上再次显示,javascript,Javascript,我正在检查用户名是否可用。当焦点设置在用户名文本框上时，用户名可用性将显示为使用ajax的onkeyup事件。但是，当设置焦点或选择其他文本框时，“用户名可用”或“不可用”文本不会隐藏，而是保留在用户名文本框之外所以请给我一些隐藏文本的代码。这是我的jsp页面 <script type="text/javascript" > function cleanup(){ document.getElementById("usernameAvail").removeAt

我正在检查用户名是否可用。当焦点设置在用户名文本框上时，用户名可用性将显示为使用ajax的onkeyup事件。但是，当设置焦点或选择其他文本框时，“用户名可用”或“不可用”文本不会隐藏，而是保留在用户名文本框之外所以请给我一些隐藏文本的代码。这是我的jsp页面

    <script type="text/javascript" >
function cleanup(){
    document.getElementById("usernameAvail").removeAttribute("value");
}


function loadXMLDoc()
{
    var xmlhttp;
    var j = document.getElementById("usertype").value;
    var k=document.getElementById("username").value;


    if(j=="students")
    {   

        var urls="passS.jsp?ver="+k;
        if (window.XMLHttpRequest)
          {
          xmlhttp=new XMLHttpRequest();
          }
        else
          {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4)
            {
                //document.getElementById("err").style.color="red";
                document.getElementById("usernameAvail").innerHTML=xmlhttp.responseText; 
            }
          }
        xmlhttp.open("POST",urls,true);
        xmlhttp.send(); 
    }   
    else if(j=="mentors")
    {
        var urls="passM.jsp?ver="+k;
        if (window.XMLHttpRequest)
          {
          xmlhttp=new XMLHttpRequest();
          }
        else
          {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4)
            {
                //document.getElementById("err").style.color="red";
                document.getElementById("usernameAvail").innerHTML=xmlhttp.responseText; 
            }
          }
        xmlhttp.open("POST",urls,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<div id="container">
    <div id="header">
        <p id="heading">Please Register</p>
    </div>
    <div id="hr"></div>
    <div id="content">
        <form id="RegistrationForm" action="RegisterServlet" method="post">

                <p><label for="usertype">User Type</label></p>

                <select id="usertype" name="usertype">
                    <option disabled selected>select user</option>
                    <option value="mentors">Mentor</option>
                    <option value="students">Student</option>
                </select>

                <p><label for="username">User Name</label></p>
                <input id="username" type="text" name="username" placeholder="Enter Username" onblur="cleanup()" onkeyup="loadXMLDoc()" />
                <span id="usernameAvail"></span>

                <p><label for="firstname">First Name</label></p>
                <input id="firstname" type="text" name="firstname" placeholder="Enter First Name" />

                <p><label for="lastname">Last Name</label></p>
                <input id="lastname" type="text" name="lastname" placeholder="Enter Last Name" />

                <p><label for="email">Email ID</label></p>
                <input id="email" type="email" name="email" placeholder="Enter Email" />                

                <p><label for="password">Password</label></p>
                <input id="password" type="password" name="password" placeholder="Password" />          

                <p><label for="cpassword">Confirm password</label></p>
                <input id="cpassword" type="password" name="password" placeholder="Confirm password" />

                <br />
                <br />
                <input class="button" type="submit" name="submit" value="Sign Up"/>
                <input class="button" type="reset" name="reset" value="Reset"/>

        </form>
        </div>

在模糊事件上，直接删除。删除之前，只需检查输入字段值是否存在。如果存在，请不要删除它，否则可以删除它

我希望这对你有帮助

我建议您使用onblur事件而不是keyup事件。要隐藏错误或成功消息，可以使用Jquery插件在几秒钟后自动隐藏这两条消息。比如下面两个例子

我还建议您使用jqueryajax方法，而不是使用简单的xmlhttp。下面是使用jQueryAjax的示例

希望它能帮助你

您没有在usernameAvail span上设置value属性，那么为什么要尝试删除属性提示：span没有value属性？