Question

我正在尝试在提交表单时在输入的背景制作相同的加载动画。

的CSS：

.inputLoading {
  background-image: url("../img/loading.gif");
  background-repeat: no-repeat;
  background-position: 99% 50%;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

的javascript：

function onSearch(){
    document.getElementById("loadingAnimation").className += " inputLoading";
}

HTML：

<form action="index.php" method="get" onsubmit="onSearch()">
    <input type="text" id="loadingAnimation" class="form-control">
    <button type="submit">Search</button>
</form>

问题是这适用于IE11和Firefox 26但不适用于Chrome 33.在Chrome中，提交表单后没有动画。 gif的URL是正确的。所以我试着解决问题，但没有运气。奇怪的是，如果我只改变输入的背景颜色，它将无处不在。

有什么想法吗？

更新：我已在多台计算机上对此进行了测试，现在我可以确定Chrome中没有问题。在某些计算机上，即使在FF或IE上也不起作用。

Answer 1

确保您的Chrome浏览器上安装了任何类型的adBlock扩展程序或图像块扩展程序。这可能是图像未显示的原因之一。

JavaScript在提交表单上更改输入样式

1 个答案: