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

我想将加载动画放在同一行上，在输入框的右侧

我试过：

<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>

我得到：

---

我无法让它显示在输入框中：（

尝试摆弄元素的绝对位置

拨弄

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

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

请尝试以下操作：

将动画放置在HTML中的输入字段之后

在图像上设置

位置：相对；

• 允许您调整元素的默认位置

使用

top

CSS属性将动画向上移动到直接位于输入字段顶部的位置

---

我同意@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');
        }
    });
});

---

在我看来，这将是最简单、最有效的方法。如果你想看得更远，这里有一个

将

输入和
img
放在一个div中，使
div
看起来像一个文本框。我现在在用手机，所以它可能不完美，但我想你明白了

您也可以将其作为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;
}

您可以在此处查看：
我的解决方案：向定义背景图像的输入元素添加一个类，然后使用background-position-x和background-position-y修改其位置

您也可以使用keywoords进行发布

background-position-x: right;
background-position-y: center;

或者把它们结合起来

background-position: center right;

然后，您只需添加或删除此类即可显示/隐藏动画
只需包含

.加载{
位置：绝对位置；
顶部：206px；
右：30px；
显示：无；
}
尝试将图像设置为输入元素的背景。在我的情况下，这是一个正在加载的动画。它不会一直显示。它仅在我的应用程序尝试从数据库中查询数据时显示。我不确定-是否将其设置为背景图像是最好的方法。：DYou可以将其设置为输入元素的背景使用特定类放置，因此
input.loading{background:url（…）}
然后只要在你想加载内容时切换该类即可。@Chad：你的建议可能就是解决方案。我希望你不介意通过回答这个问题为我们所有人提供更多细节。我不确定这是否是理想的解决方案，因为，如果用户在平板电脑或手机上显示它会怎么样？我不是那样做的人。我发誓r、 @iori该设备不重要。我尝试了“位置：相对；顶部：20%；浮动：正确；”我感觉我的顶部属性不起作用，加载动画仍在输入框外显示。有什么想法吗？尝试使用负像素偏移量作为
top
。我不确定这是否是理想的解决方案，因为，如果美国er在平板电脑或手机上显示它？我完全尊重这一点，但
位置：绝对；左：112px；上：-22px；
将把加载动画放在绝对位置，我不确定这是否是最好的方式。假设它在相对容器中，这在手机上仍然可以正常工作@lori@iori是的，只是把它应用在模糊的输入上，所以当你焦点离开它时。天哪！我花了这么多时间试图用包装器div制作一个可重用的选择加载器。我从来没有想过使用gif作为背景。简单多了！！！谢谢这不会有响应！
background-position: center right;

<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">

.loading {    
    position: absolute;
    top: 206px;
    right: 30px;
    display: none;
}