0

Input field should allow numbers and decimal not minus symbol

<input type="number" pattern="[^[0-9]([.,][0-9]{1,3})?$]*">
upendra uppi
  • 27
  • 9
  • 1
    So what is your question? – MechMK1 Jan 06 '18 at 12:13
  • The problem is that you're using type "number". This won't work with your pattern for decimals. I've explained it below – flen Jan 06 '18 at 12:42
  • Possible duplicate of [Is there a float input type in HTML(5)?](https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5) – flen Jan 06 '18 at 13:21

5 Answers5

1

OK, I got what your problem is. Please take a look at the section "Allowing decimal values". In order for an input field type="number" to work with decimals, you need to change the step attribute.

Does this work as you intended?

First try:
<input type="number" pattern="\d+[.,]?\d+" step="0.001">

Second Try:
<input type="text" pattern="\d+|\d+[.,]\d{1,3}">

My suggestion to you is to get rid of the type=number attribute. You already set a pattern attribute for the input, unless you really want to keep the scrolls for plus or minus one step, I'd set type="text".

flen
  • 1,905
  • 1
  • 21
  • 44
0

Try this: 

  <input type="number" pattern="/^[0-9.,]+$/">
Stephen Kennedy
  • 20,585
  • 22
  • 95
  • 108
lg86
  • 350
  • 2
  • 7
0

You are looking for much readable and understandable code then this works perfectly for you:

function checkDecimalDot(e)
 {
    var charCode = (e.which) ? e.which : e.keyCode;
    if (charCode != 46 && charCode > 31 
       && (charCode < 48 || charCode > 57))
    return false;

}
<input type="number" onkeypress="return checkDecimalDot(event)" >
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • But can your answer prevent something like: `1234,56.78.91.0..,`? This number: `123.456789` is not working when I try your code snippet, I think it's due to the `type="number"` attribute. I explained it in my answer – flen Jan 06 '18 at 13:26
  • Your answer is totally wrong, And i can input `123.456789` in my above snippet. Don't comment rubbish @flen – Ankit Agarwal Jan 06 '18 at 13:28
  • Strange, maybe it's a bug in my Firefox version then, but I get the "red" box after inputting it and bluring out. Just tried it again with `12.3`. If you read the MDN doc I posted you can see that input `type="number"` is not supposed to work for decimals in any browser without the "step" attribute – flen Jan 06 '18 at 13:41
  • thanks ..yeah correct.it is not accepting minus. But as to take one decimal.It is accepting so many dots – upendra uppi Jan 06 '18 at 15:50
0

This simple code will allow you to add only decimals and numbers without any negative value.

<input type="number" min="0"  step="0.001">
Lakindu Gunasekara
  • 4,221
  • 4
  • 27
  • 41
0

It's done! Used the below code

@HostListener('keypress') onkeypress(e) {
    let event = e || window.event;
    let charCode = (event.which) ? event.which : event.keyCode;
    let value : any = this.elementRef.nativeElement.value.replace(/[^0-9\.]/g, '');

    if ((event.which != 46 || value.indexOf('.') != -1) 
         && (event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
}
Krishnraj Rana
  • 6,516
  • 2
  • 29
  • 36
upendra uppi
  • 27
  • 9