问题
I need to create a form for a mobile website in which people can enter a number with a decimal mark like 5.3.
In order to make it easier for the visitors to enter the numbers, I want to force the smartphone to display the on-screen keyboard with the characters the user is most likely to enter.
It's possible to show the numbers on-screen keyboard by adding the HTML5 type="number"
input type.
Unfortunately Google Chrome then starts to validate the input and allows only intergers to be entered. So the user has a numbers on screen keyboard but cannot enter the number he needs to enter.
How can I display the numbers on-screen keyboard and still allow people who view the website with Google Chrome to enter numbers with decimal marks?
回答1:
Create the field as follows:
<input type="number" step="0.1" />
This'll allow Chrome to validate correctly and not interfere. By default if you don't provide a step value it's 1, but it can be any positive floating value.
Tested in Chrome 10,12 with HTML5 and XHTML doctypes (both work). Example HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type="number" step="0.1" />
</form>
</body>
<!-- doctypes
html5: <!DOCTYPE html>
html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
xtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
</html>
来源:https://stackoverflow.com/questions/6155744/how-can-i-prevent-chrome-from-formatting-a-html5-format-number