javascript - 如何在输入框内定位加载动画？

Question

我想将我的加载动画放在同一条线上，在我的输入框内，在右边。

我试过了:

<span>
    <input id="searchbox" placeholder="Enter Catalog # " type="text" />
    <img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/> 
</span>

我得到:

我无法让它显示在我的输入框中。 :(

Answer 1

您也可以在 CSS 中将其用作背景图片。只需创建一个 CSS 类并在加载数据时应用。 Ajax 调用完成后，从文本输入框中删除“loading”CSS 类。

.loading {    
    background-color: #ffffff;
    background-image: url("http://loadinggif.com/images/image-selection/3.gif");
    background-size: 25px 25px;
    background-position:right center;
    background-repeat: no-repeat;
}

您可以在这里查看:http://jsfiddle.net/tejsoft/7pzgtevv/4/