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

Question

I am checking username availability. 我正在检查用户名可用性。 when focus is set on the username textbox the username availability is show onkeyup event using ajax. 当在用户名文本框上设置焦点时，用户名可用性是使用ajax显示onkeyup事件。 But when set focus or select other textbox the 'username available' or 'not available' text does not hide it stays there besides username textbox as it is So please advice me some code for hiding the text. 但是当设置焦点或选择其他文本框时，“用户名可用”或“不可用”文本不会隐藏它除了用户名文本框之外还保留在那里，因此请告诉我一些用于隐藏文本的代码。 Here is my jsp page 这是我的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

On blur event your directly removing. 在模糊事件上你直接删除。 Before removing just check in the input field value is exist or not. 在删除之前只需检入输入字段值是否存在。 If exist don't remove it, otherwise you can remove it. 如果存在则不删除它，否则您可以将其删除。

I Hope this will help you. 我希望这能帮到您。

Answer 2

I recommend you to use " onblur " event instead of " keyup " event. 我建议你使用“ onblur ”事件而不是“ keyup ”事件。 For hiding the " Error " or " Success " message you can use Jquery plugin for auto hiding both messages after few seconds . 为了隐藏“ 错误 ”或“ 成功 ”消息，您可以使用Jquery插件在几秒钟后自动隐藏这两个消息。 Like following two examples. 喜欢以下两个例子。

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

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

Also I recommended you to use Jquery Ajax method instead of using simple " xmlhttp ". 另外，我建议您使用Jquery Ajax方法，而不是使用简单的“ xmlhttp ”。 Following is the example using Jquery Ajax. 以下是使用Jquery Ajax的示例。

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

Hope its help.!! 希望对它有所帮助。!!

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

问题描述

2 个解决方案

解决方案1
0 2015-02-20 16:45:27

解决方案2
0 2015-02-20 16:59:26

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

问题描述

2 个解决方案

解决方案1 0 2015-02-20 16:45:27

解决方案2 0 2015-02-20 16:59:26

解决方案1
0 2015-02-20 16:45:27

解决方案2
0 2015-02-20 16:59:26