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

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

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

Answer 2

您无法将图像添加到实际输入中，因此您的html可能显示为

<input id='inputSource'><div id='inputSourceIndicator'></的div＆GT;

您还需要添加一个函数来调用每个按键

<input id='inputSource'><div id='inputSourceIndicator' onkeyup='myFunc(this.value);></的div＆GT;

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

或者沿着这些方向： - ）

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

2 个答案: