Question

我正在使用php / JQuery，这是我到目前为止编写的内容...

的 username.php

<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 =“username”的整个文字时，这应该清除td中带有 ID =“消息”

如何用javascript实现这一目标任何帮助都感激不尽。

Answer 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>

如何在删除/退回/清除文本框中的文本时清除td内容

1 个答案: