我正在尝试在提交表单时在输入背景制作相同的加载动画。
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 上运行。
最佳答案
确保您的 chrome 浏览器上是否安装了任何类型的 adBlock 扩展程序或图像 block 扩展程序。图片无法显示可能是原因之一。
关于JavaScript 更改提交表单上的输入样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22808987/