2

I have a requirement to have 2 number inputs that show the spinner control (up down arrows that increment/decrease the input value). 

<input type="number"/>

The problem is that IE does not have support to visibly show the spinner. There is a jQuery solution using jqSpinner, but I would like to stay clear of jQuery, as it does not play nicely in my angular app.

Does anyone have a solution for this, I can't find an answer for this anywhere. (I have looked at all the similar answers, no duplicate question discusses a non-jQuery solution)

Kode_12
  • 4,506
  • 11
  • 47
  • 97
  • You'd probably have to build your own higher order component with an input box and a up and down arrow. – Matt Jun 16 '17 at 04:48

2 Answers2

0

By JavaScript to control, maybe this is what you want

 var fontSize = document.getElementById('fontSize');

 function updateSize() {
  testDrive.style.fontSize = fontSize.value + 'px';
 }
 fontSize.addEventListener('change', updateSize, false);
 updateSize();
<style type="text/css">
   .textbox0 {
    width: 3em;
    background: #f1f1f1;
    padding: .25em .5em;
    line-height: 1.5;
    height: 1.5em;
}
  </style>
   Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
   min="8" value="48" />
   px
yang
  • 1
  • 4
0

browsers like IE (v9 and lower) do have problems with HTML5 tags and HTML5 input types. In order to get all your HTML5 tags working and input types like number, tel etc working, place the following code between the <head></head> tags:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

This is conditional IE script for HTML5 Shiv/HTML5 shim (or shim: which in computing language means a workaround). It is commented. So it is checked if the browser being used is IE or not, that's the first statement in the above code. If it is, this workaround is run and helps you use your HTML5 specific input values and tags.

Cheers!

TsukiCodes
  • 1
  • 2