Question

我想在输入事件（任何字符）上删除输入元素的背景，但这不起作用

$(document).ready(function() {
  $("#username").css("background-color", "red");
  $("#password").css("background-color", "red");
  $("#username").on("input", function() {
    $(this).css("background-color", "none");

  $("#password").on("input", function() {
    $(this).css("background-color", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username" />
<input type="password" id="password" />

Answer 1

background-color:none无效的CSS。另外，您的密码事件绑定位于用户名中。

$(document).ready(function() {
  $("#username").css("background-color", "red");
  $("#password").css("background-color", "red");
  $("#username").on("input", function() {
    $(this).css("background-color", "transparent");
  });
 $("#password").on("input", function() {
      $(this).css("background-color", "transparent");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username" />
<input type="password" id="password" />

Answer 2

您有一些语法错误，您忘记关闭传递给on的函数。 none对background-color也不有效，您可能想要使用initial。

$(document).ready(function() {
  $("#username").css("background-color", "red");
  $("#password").css("background-color", "red");
  $("#username").on("input", function() {
    $(this).css("background-color", "initial");
  });
  $("#password").on("input", function() {
    $(this).css("background-color", "initial");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username" />
<input type="password" id="password" />

jQuery事件方法不会触发

2 个答案: