Ignoring non number inputs failing on Safari and Edge

[arlair]

Hi, I think I found a small bug on the demo page:
http://dev.glaciersoft.com/cyclic/molecule-input/

for the $ total input, I can't type letters, but I can on Safari and Edge browsers. The label remains in the input and the letters being entered are written on top of the label. The label only floats on blur.

[Frikki]

Thanks for the report. Could you specify which browser versions and operating systems this is an issue with?

[arlair]

Windows 10 Pro 10.0.10586 and Edge browser 25.10586.0.0.

OS X El Capitan 10.11.2 with Safari 9.0.2 (11601.3.9)

[Frikki]

👍 You are welcome to make a PR if you have a solution.

[arlair]

All browsers seem to allow the letter e, I'm not sure if this is this for scientific notation or a bug.

[Frikki]

Yes. The e is for scientific notation. However, if the e is the first input character, I also experience the bug in Chrome. Haven’t tested other browsers yet.

[arlair]

I had a look and you seem to be using HTML form validation.

I checked some other implementations and they don't seem to work in Safari either, so I think it may just be poorly supported by browsers.

http://www.wufoo.com/html5/types/7-number.html

http://react-toolbox.com/#/components/input

[arlair]

from the document

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

"Even though Safari supports the constraint validation API, as of this writing (version 6), Safari will not prevent submission of a form with constraint validation issues. To the user Safari will behave no differently than a browser that doesn't support constraint validation at all.

The easiest way around this is to use the same approach as the workaround described above, give all forms the novalidate attribute and manually prevent form submissions using preventDefault."