Wie wird das Laden von Spinner in einem Textfeld beim Klicken auf eine Schaltfläche angezeigt?

Question

Wie wird der Ladedrehknopf beim Klicken auf eine Schaltfläche in einem Textfeld angezeigt? Angenommen, ich verfüge über ein Textfeld mit Benutzername und Passwort und eine Anmeldeschaltfläche. Sobald ich Benutzernamen und Passwort eingegeben habe und auf die Schaltfläche Login geklickt habe, sollten die Spinner in den Textfeldern angezeigt werden. Freundlich helfen. Ich suche nach einer JQuery-Option oder Javascript.

Answer 1

Fügen Sie einfach die "Spinner" Bild als Hintergrundbild auf Ihre Eingaben, wenn Sie das Formular abschicken:

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

Answer 2

Angenommen, Ihre html hat folgender Textkasten:

<input id='inputsource' /> 

Definieren Sie eine neue CSS-Klasse

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

und dann diese Klasse zu Ihrem Testbox von jquery Code hinzufügen:

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

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