plus sign in html input type=number

Issue

Does anyone know if it's possible to add a plus sign in a html input type=number field? I have a scenario whereby users need to enter a modifier value which is either +1 to +10 or -1 to -10. I want to make it very explicit to the user that their inputted value increments the resulting value. therefore it would be great if a + sign is prepended to a positive inputted value.

I'm using this input in an Angular2 reactive form with bootstrap styling. so an Angular2 directive, a boostrap style or even a jquery solution are welcome

What I've seen so far is about adding currency symbols inside the form control or about adding + and minus buttons to increment and decrement the value. But that's not what I want, so I doubt if this is possible at all.

Solution

I don't think it is possible to manipulate the input. The default behavior is "-" for negative and no sign for positive numbers.

Even if you checked some custom UI frameworks like: JQuery UI, Bootstrap, Angular Material ... you will not get the wished behavior.

I guess the only solution for this is to write your own custom code.

Two scenarios are possible:

1- An input with Text and the manipulating will be done in Javascript.

2- Create a pipe in angular2 and give it to the element which I think is much easier than the first one.

Answered By - Samy Sammour