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

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

Answer 1

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

定义一个新的css类

 .loadinggif { background: url('http://sofzh.miximages.com/jquery/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 */ });