单击按钮时如何在文本框中显示加载微调器？答案

【问题标题】：How to display loading spinner in a textbox on clicking of a button?单击按钮时如何在文本框中显示加载微调器？
【发布时间】：2012-10-01 23:40:16
【问题描述】：

如何在单击按钮时在文本框中显示加载微调器？假设我有一个用户名和密码文本框，以及一个登录按钮。输入用户名和密码并单击登录按钮后，微调器应显示在文本框中。请帮忙。我正在寻找 JQuery 选项或 Javascript。

【问题讨论】：

只需在文本框上放置几个动画 gif 并使用 jQuery 来切换它们的可见性
我认为这无法做到.....但是您可以使用一些替代方法，例如创建 div 并在按钮的舔上以这种运气和感觉在文本框的位置显示此 div它将像文本框一样可见。
您需要在文本框中显示微调器？？还是与文本框平行？
需要在文本框内显示微调器，甚至在文本框旁边都可以。

标签： jquery spinner loading

【解决方案1】：

假设您的 html 有以下文本框：

<input id='inputsource' />

定义一个新的css类

.loadinggif 
{
   background:
     url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')
     no-repeat
     right center;
}

然后通过 jquery 代码将该类添加到您的测试箱中：

$('#inputsource').addClass('loadinggif');

Jsfiddle： http://jsfiddle.net/msjaiswal/FAVN5/

【讨论】：

感谢动态表单更新的简单可视化解决方案 ;-)
我们如何设置该图像的高度和宽度？
这里背景尺寸：20px； //所有边
请注意 jsfiddle.net 示例的微调器图像不再存在。所以该示例似乎不起作用。

【解决方案2】：

只需在提交表单时将“微调器”图像作为背景图像添加到您的输入中：

CSS：

input.spinner {
    background-image:url('spinner.gif');
    background-repeat:no-repeat;
    background-position:5px 5px /* Change to accommodate to your spinner */
}

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 */
});

【讨论】：