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

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 扩展程序或图像 block 扩展程序。图片无法显示可能是原因之一。