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

Question

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

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

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