Javascript 如何在输入框内定位加载动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28814057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position loading animation inside input box?
提问by iori
I want to position my loading animation on the same line, inside my input box, to the right.
我想将我的加载动画放置在同一行，在我的输入框中，在右边。
I tried :
我试过 ：
<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>
I get :
我得到：
I couldn't get it to show inside my input box. :(
我无法让它显示在我的输入框中。:(
回答by TejSoft
You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input box.
您也可以将其作为 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;
}
You can view it here: http://jsfiddle.net/tejsoft/7pzgtevv/4/
你可以在这里查看：http: //jsfiddle.net/tejsoft/7pzgtevv/4/
回答by Chad
I agree with @Sam in that it could be the background of the element, and all you'd have to toggle would be a class. If you set it up like:
我同意@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;
}
And then you can toggle the class as you're making your ajax call like:
然后您可以在进行 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');
}
});
});
That, in my opinion, would be the simplest and most effective way of doing it. If you want to look further, here's a fiddle
在我看来，这将是最简单、最有效的方法。如果你想看得更远，这里有一个小提琴
回答by ByteHamster
Place both the inputand the imginside a div and make that divlook like a text box. I am currently on my phone so it might not be perfect but I think you get the point.
将 theinput和 theimg放在一个 div 里面，让它div看起来像一个文本框。我目前正在使用手机，所以它可能并不完美，但我认为您明白这一点。
回答by Hyman hardcastle
Try fiddling around with absolutely positioning the element.
尝试摆弄绝对定位元素。
fiddle
小提琴
img {
position: absolute;
left: 112px;
top: -22px;
}
https://jsfiddle.net/kmbxawdd/2/
https://jsfiddle.net/kmbxawdd/2/
Furthermore, you can set the containing elements position to relative, meaning you can style directly to these dimensions rather than the documents.
此外，您可以将包含元素的位置设置为相对位置，这意味着您可以直接为这些维度而不是文档设置样式。
回答by Sildoreth
Try the following:
请尝试以下操作：
- Place the animation after the input field in the HTML
Set
position: relative;on the image- Allows you to tweak the position of the element from where it would be by default
- Use the
topCSS attribute to shift the animation upward to the point where it is directly on top of the input field.
- 将动画放在 HTML 中的输入字段之后
position: relative;在图像上设置- 允许您调整元素的默认位置
- 使用
topCSS 属性将动画向上移动到它直接位于输入字段顶部的位置。
回答by Souhaieb Besbes
My solution: add a class to the input element that defines a background image, then modify its position with background-position-xand background-position-y
我的解决方案：在定义背景图像的输入元素中添加一个类，然后使用background-position-x和background-position-y修改其位置
.Loading {
background-image: url("bg.gif");
background-repeat: no-repeat ;
background-position-x: 99% ;
background-position-y: 50% ;
}
you can also use keywoords for postioning
您还可以使用关键字进行定位
background-position-x: right;
background-position-y: center;
or combine them
或将它们结合起来
background-position: center right;
then, you can just add or remove this class to show/hide the animation
然后，您可以添加或删除此类来显示/隐藏动画
回答by Optimaz ID
just include <img>element inside <input>element.then you can use js to show and hide this image using id attribute.
只需<img>在<input>element.then 中包含元素，然后您就可以使用 js 使用 id 属性显示和隐藏此图像。
<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">
.loading {
position: absolute;
top: 206px;
right: 30px;
display: none;
}
