jQuery 单击按钮时如何在文本框中显示加载微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12837335/
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 display loading spinner in a textbox on clicking of a button?
提问by Bino
How to display loading spinner in a textbox on clicking of a button? Say I have a username and password textbox, and a login button. Once i enter username and password and clicking on Login button, the spinners should be displayed in the textboxes. Kindly help. Iam looking for a JQuery option or Javascript.
单击按钮时如何在文本框中显示加载微调器？假设我有一个用户名和密码文本框，以及一个登录按钮。一旦我输入用户名和密码并单击登录按钮，微调器应显示在文本框中。请帮忙。我正在寻找 JQuery 选项或 Javascript。
回答by Mayank Jaiswal
Let's say your html has following textbox :
假设您的 html 具有以下文本框：
<input id='inputsource' />
Define a new css class
定义一个新的 css 类
.loadinggif
{
background:
url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')
no-repeat
right center;
}
and then adding this class to your testbox by jquery code:
然后通过 jquery 代码将此类添加到您的测试盒中：
$('#inputsource').addClass('loadinggif');
Jsfiddle: http://jsfiddle.net/msjaiswal/FAVN5/
jsfiddle：http: //jsfiddle.net/msjaiswal/FAVN5/
回答by sunn0
Just add the "spinner" image as a background image to your inputs when submitting the form :
提交表单时，只需将“微调器”图像作为背景图像添加到您的输入中：
CSS:
CSS：
input.spinner {
background-image:url('spinner.gif');
background-repeat:no-repeat;
background-position:5px 5px /* Change to accommodate to your spinner */
}
JS:
JS：
$('form').submit(function(e){
e.preventDefault();
$f = $(this);
$f.submit(); /* replace with your ajax call */
$f.find('input[type="text"], input[type="password"]')
.val('') /* Remove values or store them if you need them back */
.addClass("spinner") /* Add the spinning image */
.attr("disabled", "disabled"); /* Disable the inputs */
});
