Jak wyświetlić ładowanie spinnera w polu tekstowym po kliknięciu przycisku?

Question

Jak wyświetlić ładowanie spinnera w polu tekstowym po kliknięciu przycisku? Powiedz, że mam pole tekstowe nazwy użytkownika i hasła oraz przycisk logowania. Po wprowadzeniu nazwy użytkownika i hasła oraz kliknięciu przycisku Logowanie, spinner powinien być wyświetlany w polach tekstowych. Uprzejma pomoc. Jestem szukając opcji JQuery lub JavaScript.

Answer 1

Wystarczy dodać "pokrętła" obrazu jako tła do wejść po wysłaniu formularza:

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

Załóżmy, że html ma następujący tekst:

<input id='inputsource' /> 

Zdefiniuj nową klasę css

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

a następnie dodając tę ​​klasę do swojego TextBox przez kod jQuery:

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

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