Question

我正在检查用户名可用性。当在用户名文本框上设置焦点时，用户名可用性是使用ajax显示onkeyup事件。但是，当设置焦点或选择其他文本框时，可以使用＆＃39;用户名＆＃39;或者＆＃39;不可用＆＃39;文本不会隐藏它除了用户名文本框之外还保留在那里所以请给我一些隐藏文本的代码。这是我的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>

Answer 1

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

我希望这会对你有所帮助。

Answer 2

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

http://pjdietz.com/jquery-plugins/freeow/

http://www.myjqueryplugins.com/jquery-plugin/jnotify#field_screenshots

此外，我建议您使用Jquery Ajax方法，而不是使用简单的“ xmlhttp ”。以下是使用Jquery Ajax的示例。

http://www.tutorialspoint.com/jquery/jquery-ajax.htm

希望有所帮助。!!

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

2 个答案: