The following works fine in Chrome and Firefox, however in Edge it will alert NaN
no matter the input
document.querySelector('button').addEventListener('click', function(){
alert(document.querySelector('input').valueAsNumber);
});
<input type='number' value='34'>
<button>
Alert number
</button>
Now, I am not asking how to fix this (using parseFloat(el.value)
does that trick), I am asking however what Edge did implement valueAsNumber
for then if the most basic function doesn't seem to work. As in, how is one supposed to use this property according to Edge.
When the data in the input field is not a number and we try to access the value of the sap.m.Input field, we get a null as the result. This holds valid for all methods of accessing the value: using events like liveChange or change and using getValue method.
The ideal behavior of sap.m.Input type=”Number” is that it accepts only numbers and any other character typed on the keyboard will neither be displayed on the screen nor be present in the “value” property of the input field. But this behavior is not supported in Microsoft Edge or Firefox browsers.
Tip: Use the isNaN () global function to check if a value is a NaN value. Number.NaN is an ES1 feature (JavaScript 1997). It is fully supported in all browsers:
Definition and Usage. The NaN property represents "Not-a-Number" value. This property indicates that a value is not a legal number. The NaN property is the same as the Number.Nan property. Tip: Use the isNaN () global function to check if a value is a NaN value.
Microsoft Edge is having broken behavior on valueAsNumber
. This is reported as bug #669685. In addition, setting valueAsNumber
yields an InvalidStateException.
This is fixed in Microsoft Edge 17682, currently available in an Windows Insider build.
I don't know why Edge doesn't support valueAsNumber
on type="number"
, but it does support it on range, week, month, and date:
document.addEventListener('click', function(e) {
if(e.target.nodeName === 'BUTTON') {
alert(e.target.previousElementSibling.valueAsNumber);
}
});
<p><input type="range" value="15"> <button>Alert number</button></p>
<p><input type="week" value="2015-W50"> <button>Alert number</button></p>
<p><input type="month" value="2015-12"> <button>Alert number</button></p>
<p><input type="date" value="2015-12-12"> <button>Alert number</button></p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With