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

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调用后,从文本输入框中删除"加载"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/

Answer 2

我同意@Sam,因为它可能是元素的背景,你必须切换的所有内容都是一个类.如果你设置如下:

input {
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 30px;
    padding: 10px;
}
input.loading {
    background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
}

然后,您可以在进行ajax调用时切换类:

$(document).on('blur', 'input', function(e) {
    var $t = $(e.currentTarget);
    $t.addClass('loading');
    $.ajax({
        url: $t.data('ajax'),
        success: function(data) {
            //dostuff
            $t.removeClass('loading');
        }
    });
});

在我看来,这将是最简单,最有效的方式.如果你想进一步看,这是一个小提琴

Answer 3

尝试摆弄元素的绝对定位。

小提琴

img {
    position: absolute;
    left: 112px;
    top: -22px;
}

https://jsfiddle.net/kmbxawdd/2/

此外，您可以将包含元素的位置设置为相对位置，这意味着您可以直接根据这些维度而不是文档设置样式。