加号 html 输入 type=number

Question

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.

Answer 1

No it's not possible. The number field only accepts - , 0-9 and e to be entered. As a workaround you could place the + in the HTML before the input, eg:

 + <input type="number" />

Alternatively you could use a standard type="text" input, but that would mean creating your own validation logic which would make the code much more complex.

Answer 2

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

even if you checked a create UI frameworks like:

Jquery UI, Bootstrap, Angular Material ...

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

two scenarios are available:

1- an input with Text and the manipulating will be in javascript.

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

Answer 3

I hope this will help on you guys!!

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).on('keypress','#input',function (e) { var keyCode = e.which; if ($(this).val().trim().charAt(0) == "\+") { if ( keyCode == 43 ) { return false; } } else{ for (var i = 1; i < $(this).val().length+1; i++) { if(i!=0){ if ( keyCode == 43 ) { return false; } } } } }); $(document).on('input', '#input', function() { this.value = this.value.replace(/[^+{1}|^0-9]/g,''); }); </script>