Yazmaya başladığımda metin kutusuna yükleme döndürücüsü nasıl eklenir?

Yazmaya başladığımda metin kutusuna bir yükleme döndürücüsü nasıl eklenir ve maksimum uzunluk elde edildikten sonra, yükleme döndürücünün yerinde yeşil bir onay işareti görüntülenir.Yazmaya başladığımda metin kutusuna yükleme döndürücüsü nasıl eklenir?

Bunu iyonik uygulamamda yapıyorum.

Kısmen denedim ama nasıl tamamlayacağımı bilmiyorum. JQuery gerekli olabilir ama bu konuda fazla bilgim yok.

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

css: Burada

benim kodudur senin görüntülere erişimi olmayan sinnce

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

kaynak

2016-04-14 Himanshu K

Olası yinelenen :-) bu doğrultuda bir

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

Ya bir şey eklemek gerekir (http [bir düğmeye tıklayarak bir metin kutusuna dönen yükleme görüntülemek için nasıl?]: // 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-canlandırma-gif-dosyası-içinde-otomatik tamamlama-textbox-kullanarak –

Bu kontrol edin 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 Nasıl yapıldığına dair fikir edinirsiniz –

Belki (bu deneyebilirsin, sadece durumunu göstermek için kenarlık rengi kullanılır):

$('#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" />

Sen gerçek girişine bir görüntü ekleyemezsiniz

kaynak

2016-04-14 13:51:37 KiiroSora09

böylece html görünebilir olarak

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

Ayrıca her bir tuşa basarak

<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></ ile aramak için bir işlev eklemek gerekir

div>

Kişisel JS işlevi olacağını

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";

Sizin css ayrıca

kaynak

2016-04-14 13:57:18 jeff

Yazmaya başladığımda metin kutusuna yükleme döndürücüsü nasıl eklenir?

cevap

İlgili konular