Jak obsługiwać liczby zmiennoprzecinkowe i separatory dziesiętne z numerem typu danych wejściowych html5

step

1

<input type="number" name="price"

 pattern="[0-9]+([\.,][0-9]+)?" step="0.01"

 title="This should be a number with up to 2 decimal places.">

validity.valid

step

• jsFiddle http://jsfiddle.net/natchiketa/xrujZ/16/

step

1

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"

 title="The number input must start with a number and use either comma or a dot as a decimal character."/>

<input type="number" formnovalidate/>

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 

 name="my-num" formnovalidate

 title="The number input must start with a number and use either comma or a dot as a decimal character."/>

valueAsNumber

.val ()

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate"/>

• Użytkownicy mobilni zobaczą klawiaturę swojego telefonu, która może się różnić z klawiatury numerycznej.
• Co gorsza, klawiatura telefonu może nawet nie mieć klawisza przecinka.

• Wydrukuj wartość początkową oddzieloną przecinkami (firefox wykreśla ją dla type=number)
• Weryfikacja HTML5 nie powiodła się (jeśli jest przecinek)
• Niech pole będzie czytane dokładnie jako dane wejściowe (z możliwym przecinkiem)

$ ("# my_input"). Val ();

parseFloat

parseInt

parseFloat

toFixed

var i = 0.011;

var ss = i.toFixed(2);//It returns 0.01

keyup

var currentString = '';

var badState = false;

var lastCharacter = null;document.getElementById("field").addEventListener("keyup",($event) => {

 if ($event.target.value && !$event.target.validity.badInput) {

 currentString = $event.target.value;

 } else if ($event.target.validity.badInput) {

 if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {

 $event.target.value = ((+currentString) + (+$event.key/10));

 badState = false;

 } else {

 badState = true;

 }

 }

 document.getElementById("number").textContent = $event.target.value;

 lastCharacter = $event.key;

});document.getElementById("field").addEventListener("blur",($event) => {

 if (badState) {

 $event.target.value = (+currentString);

 badState = false;

 document.getElementById("number").textContent = $event.target.value;

 }

});

#result{

 padding: 10px;

 background-color: orange;

 font-size: 25px;

 width: 400px;

 margin-top: 10px;

 display: inline-block;

}#field{

 padding: 5px;

 border-radius: 5px;

 border: 1px solid grey;

 width: 400px;

}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators"><span id="result" >

 <span >Current value: </span>

 <span id="number"></span>

</span>

@Directive({

 selector: '[appFloatHelper]'

})

export class FloatHelperDirective {

 private currentString = '';

 private badState = false;

 private lastCharacter: string = null; @HostListener("blur", ['$event']) onBlur(event) {

 if (this.badState) {

 this.model.update.emit((+this.currentString));

 this.badState = false;

 }

 } constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {

 this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {

 if (el.nativeElement.value && !el.nativeElement.validity.badInput) {

 this.currentString = el.nativeElement.value;

 } else if (el.nativeElement.validity.badInput) {

 if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {

 model.update.emit((+this.currentString) + (+e.key/10));

 el.nativeElement.value = (+this.currentString) + (+e.key/10);

 this.badState = false;

 } else {

 this.badState = true;

 }

 } 

 this.lastCharacter = e.key;

 });

 }

 

}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

$ ('# my_input'). Val ()

document.getElementById ('my_input'). ValueAsNumber

$ ("# my_input"). Val ();

Number (your_value_retrieved)

Number ()