如何在文本框中添加加載微調框，我開始輸入它？

當我開始在文本框中輸入內容時，如何在文本框中添加加載微調框，一旦達到最大長度，將在加載微調框的位置顯示一個綠色的刻度標記。如何在文本框中添加加載微調框，我開始輸入它？

我正在做我的離子應用程序。

我已經部分嘗試過它，但不知道如何完成它。可能是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; 
}

來源

2016-04-14 Himanshu K

的可能重複那些線（HTTP [如何在按鈕上點擊的文本框顯示正在加載的旋轉？]：// stackoverflow.com/questions/12837335/how-to-display-loading-spinner-in-a-textbox-on-clicking-of-a-button）http://stackoverflow.com/questions/15774710/how-to-顯示加載圖像動畫gif文件裏面自動完成文本框使用 –

檢查此問題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你會知道怎麼做 –

也許你可以試試這個（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" />

來源

2016-04-14 13:51:37 KiiroSora09

無法將圖像添加到實際輸入所以你的HTML可能會出現

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

您還需要添加一個功能與每個按鍵

<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></調用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還需要包括

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

或者沿東西:-)

來源

2016-04-14 13:57:18 jeff

如何在文本框中添加加載微調框，我開始輸入它？

回答

相關問題