テキストボックスにローディングスピナーを追加するにはどうすればいいですか？

Question

テキストボックスにローディングスピナーを追加するには、入力を開始して最大長に達すると、スピナーをロードする代わりに緑色のチェックマークが表示されます。

私はイオンアプリでこれをやっています。

私は部分的に試しましたが、完了方法はわかりません。 jqueryが必要かもしれませんが、私はそれについて多くの知識を持っていません。ここで

が私のコードです：

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

Answer 1

たぶん、あなたは私があなたのイメージへのアクセス権を持っていない、この（sinnceを試みることができる、私はちょうど状態を示すために、境界線の色を使用しました）：

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

あなたはまた、各キー押下に

<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></を呼び出すための機能を追加する必要があります

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

としてあなたのhtmlが表示される場合がありますので、あなたが実際の入力に画像を追加することはできません

Answer 2

div>の

あなたのJS関数は次のようになり

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も:-)