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

How to clear a td content upon deleting/backspacing/clearing text in a textbox

本文关键字：文本 清除 td 内容 后退 删除      更新时间：2023-09-26

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

用户名.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="用户名"的整个文本时，这应该清除td中出现的ID ="消息"

的文本如何使用javascript实现这一目标。
任何帮助将不胜感激。

使用 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>

相关文章：