当我开始输入时，如何在文本框中添加加载微调器？答案

【问题标题】：How to add loading spinner in textbox as I start typing in it?当我开始输入时，如何在文本框中添加加载微调器？
【发布时间】：2016-04-14 21:57:18
【问题描述】：

当我开始输入时如何在文本框中添加加载微调器，一旦达到最大长度，加载微调器的位置将显示一个绿色刻度线。

我正在我的 ionic 应用程序中执行此操作。

我已经部分尝试过了，但不知道如何完成它。可能需要 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;
}

【问题讨论】：

How to display loading spinner in a textbox on clicking of a button?stackoverflow.com/questions/15774710/…的可能重复
检查这个stackoverflow.com/questions/15774710/… & stackoverflow.com/questions/12837335/… 你会明白如何做

标签： javascript jquery ionic-framework

【解决方案1】：

也许你可以试试这个（因为我无权访问你的图片，我只是用边框颜色来表示状态）：

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

【讨论】：

【解决方案2】：

您无法将图像添加到实际输入中，因此您的 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;
}

或者类似的东西:-)

【讨论】：