Wie kann ich den Lade-Spinner in das Textfeld einfügen, während ich damit anfange zu tippen?

Wie füge ich einen Ladespinner in das Textfeld ein, wenn ich mit der Eingabe anfange und sobald die Maximallänge erreicht ist, wird an der Stelle des Ladespinners ein grünes Häkchen angezeigt.Wie kann ich den Lade-Spinner in das Textfeld einfügen, während ich damit anfange zu tippen?

Ich mache das in meiner ionischen App.

Ich habe es teilweise versucht, aber ich weiß nicht, wie man es vervollständigt. Vielleicht ist Jquery nötig, aber ich weiß nicht viel darüber.

Hier ist mein Code:

<input id='inputsource' maxlength="10" />

css:

.loadinggif { 
    background:url('img/ajax-loader.gif') no-repeat right center; 
} 
.greentick { 
    background:url('img/greentick.png') no-repeat right center; 
}

Quelle

2016-04-14 Himanshu K

Mögliches Duplikat schließen (http [Wie in einem Textfeld auf Mausklick auf eine Schaltfläche Laden spinner anzuzeigen?]: // stackoverflow.com/questions/12837335/how-to-display-loading-spinner-in-a-textbox-on-clicking-of-a-button) http://stackoverflow.com/questions/15774710/how-to- show-loading-image-animated-gif-Datei-inside-autocomplete-textbox-using –

Überprüfen Sie diese http://stackoverflow.com/questions/15774710/how-to-show-loading-image-animated-gif-file- inside-autocomplete-textbox-using & http://stackoverflow.com/questions/12837335/how-to-display-loading-spinner-in-a-textbox-on-clicking-of-a-bu tton Sie werden die Idee von how-to bekommen –

Vielleicht könnten Sie versuchen (sinnce I, I-Zustand nur Randfarbe keinen Zugriff auf Ihre Bilder verwendet haben, um anzuzeigen,):

$('#inputsource').on('keydown', function() { 
 
    $(this).addClass('loadinggif'); 
 
    }) 
 
    .on('blur', function() { 
 
    $(this).removeClass('loadinggif'); 
 
    }) 
 
    .on('keyup', function() { 
 
    var $this = $(this); 
 

 
    if ($this.val().length >= 10) { 
 
     $this 
 
     .removeClass('loadinggif') 
 
     .addClass('greentick'); 
 
    } else { 
 
     $this.removeClass('greentick'); 
 
    } 
 
    });

.loadinggif { 
 
    background: url('img/ajax-loader.gif') no-repeat right center; 
 
    border: 1px solid tomato; 
 
    outline: none; 
 
} 
 

 
.greentick { 
 
    background: url('img/greentick.png') no-repeat right center; 
 
    border: 1px solid yellowgreen; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='inputsource' maxlength="10" />

Quelle

2016-04-14 13:51:37 KiiroSora09

Sie können kein Bild auf dem tatsächlichen Eingang so Ihre HTML hinzufügen könnte scheinen, als

<input id='inputSource'><div id='inputSourceIndicator'></ div>

Sie werden auch mit jedem Tastendruck

<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></ eine Funktion aufzurufen hinzufügen müssen div>

Ihre JS Funktion wäre

function myFunc(value) { 
    // do check of whatever 
    // if check is false 
    // change the class of the indicator 
     document.getElementById('inputSourceIndicator').className = "loadinggif"; 
    // otherwise show the other class 
     document.getElementById('inputSourceIndicator').className = "greentick";

CSS müssen auch

#inputSourceIndicator { 
    width: 16px; 
    height: 16px; 
    display: inline-block; 
}

Oder etwas in diese Richtung :-)

Quelle

2016-04-14 13:57:18 jeff

Wie kann ich den Lade-Spinner in das Textfeld einfügen, während ich damit anfange zu tippen?

Antwort

Verwandte Themen