search

CyclicMaterials / molecule-input

A Material Design text field
MIT License
16 stars 3 forks source link

Ignoring non number inputs failing on Safari and Edge #128

Open arlair opened 8 years ago

arlair commented 8 years ago

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 commented 8 years ago

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

arlair commented 8 years ago

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 commented 8 years ago

:+1: You are welcome to make a PR if you have a solution.

arlair commented 8 years ago

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

Frikki commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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."