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

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

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

来源

2012-10-11 Bino

正义立场在文本框一对夫妇GIF动画并使用jQuery切换他们的知名度 – paul

我认为这不能做.....但你可以用一些替代方法，如创建div和按钮的舔显示此div与文本框的位置与苏ch类型的运气，并觉得它会像文本框一样可见。 –

你需要在文本框内显示spinners？或平行于文本框？ –

只是作为背景图像提交表单时添加了 “微调” 的形象，以您的输入以下文本框：

<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代码添加这个类到你的TESTBOX：

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

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

来源

2012-10-11 10:35:22 sunn0

它不工作sunn0..pls帮助 – Bino

请更具体一些，并将您的代码放在http://jsfiddle.net/ – sunn0

比方说，你的HTML有

来源

2013-05-01 13:37:39

感谢您提供动态表单更新的简单可视化解决方案;-) –

我们如何设置高度和该图像的宽度？ –

here background-size：20px; //为所有方面 –

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

回答

相关问题