CODEWITHSUNDEEP
javascriptjqueryionic-framework
Himanshu K
Himanshu K

Reputation: 224

How to add loading spinner in textbox as I start typing in it?

How to add a loading spinner in the textbox as I start typing in it and once the max-length is achieved a green tick mark will be displayed in the place of loading spinner.

I am doing this in my ionic app.

I have partially tried it, but don't know how to complete it. May be jquery is needed but I don't have much knowledge about that.

Here is my code:

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

Upvotes: 0

Views: 2468

Answers (2)

user2417483
user2417483

Reputation:

You can't add an image to the actual input so your html might appear as

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

You will also need to add a function to call with each keypress

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

Your JS function would be

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

Your css would also need to include

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

Or something along those lines :-)

Upvotes: 1

KiiroSora09
KiiroSora09

Reputation: 2287

Maybe you could try this (sinnce I don't have access to your images, I just used border color to indicate state):

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

Upvotes: 1

Related Questions