2016-03-06 68 views
1

我在PHP/JQuery的工作,這是我迄今編碼...

username.php

如何清除後刪除/退格/清除文本TD內容在一個文本框

<html> 
<head> 
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $("#username").change(function(){ 

       if($('#username').val().length == 0){ 

        $('#message').empty(); 
       } 
       else{ 

        $("#message").html("<img src='images/loader.gif' /> checking..."); 

        var username = $("#username").val(); 

        $.post("check.php", { user: $("#username").val() }, function (data){ 
         if(data == 0){ 

          $("#message").html("<img src='images/tick.png' /><span style='font-size:13px; color: black'> Username available</span>");        
          proceed = true; 

         } 
         else{ 

          $("#message").html("<img src='images/err.png' /><span style=font-size:13px; color: red'> Username already taken</span>");        
          proceed = false; 
         } 
        });      
       }  
      }); 
     }); 

    </script> 

</head> 

<body> 
    <form id="user">   
     <table> 
      <tr> 
       <td>Username</td> 
       <td>:</td> 
       <td><input type="text" name="username" id="username"/></td> 
       <td id="message"></td> 
      </tr> 
      <tr> 
       <td>Password</td> 
       <td>:</td> 
       <td><input type="text" name="password" id="password" /></td> 
      </tr> 
     </table> 

     <button type="submit" name="submit" >Check</button> 
    </form> 
</body> 
</html> 

現在我想實現的是:

正如我退格鍵/刪除整個文本的文本框與ID =「用戶名」,這應該清除td中出現的文字ID =「message」

如何用javascript實現此功能。
任何幫助將不勝感激。

回答

1

使用keyup/input事件而不是change或這兩個事件一起向後兼容。

試試這個:

$(document).ready(function() { 
 
    $("#username").on('input, keyup', function() { 
 
    if ($('#username').val().length == 0) { 
 
     $('#message').empty(); 
 
    } else { 
 
     $("#message").html("<img src='images/loader.gif' /> checking..."); 
 
     var username = $("#username").val(); 
 
     $.post("check.php", { 
 
     user: $("#username").val() 
 
     }, function(data) { 
 
     if (data == 0) { 
 
      $("#message").html("<img src='images/tick.png' /><span style='font-size:13px; color: black'> Username available</span>"); 
 
      proceed = true; 
 
     } else { 
 
      $("#message").html("<img src='images/err.png' /><span style=font-size:13px; color: red'> Username already taken</span>"); 
 
      proceed = false; 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form id="user"> 
 
    <table> 
 
    <tr> 
 
     <td>Username</td> 
 
     <td>:</td> 
 
     <td> 
 
     <input type="text" name="username" id="username" /> 
 
     </td> 
 
     <td id="message"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Password</td> 
 
     <td>:</td> 
 
     <td> 
 
     <input type="text" name="password" id="password" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <button type="submit" name="submit">Check</button> 
 
</form>

+0

三江源這樣一個複雜的答案 – echology