Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

On an input[type='number'] Edge always returns `NaN` for `valueAsNumber`

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.

like image 555
David Mulder Avatar asked Dec 13 '15 12:12

David Mulder


People also ask

When the data in the input field is not a number?

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.

Can I use SAP input type=”number” in Microsoft Edge?

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.

How to check if a value is Nan in JavaScript?

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:

What does Nan mean in SQL?

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.


2 Answers

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.

like image 149
Sebazzz Avatar answered Oct 17 '22 04:10

Sebazzz


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>
like image 36
Rick Hitchcock Avatar answered Oct 17 '22 05:10

Rick Hitchcock