如何防止Chrome格式化HTML5格式的数字 [英] How can I prevent Chrome from formatting a HTML5 format number

查看:88
本文介绍了如何防止Chrome格式化HTML5格式的数字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要为移动网站创建一个表单,用户可以在其中输入一个带有小数点的数字,例如5.3。 为了使其更容易访客输入数字,我想强制智能手机显示屏幕键盘上的用户最有可能进入的字符。

可以通过添加HTML5 type =number输入类型来显示屏幕键盘上的数字。

不幸的是,Chrome浏览器开始验证输入,并且只允许输入整数。所以用户在屏幕键盘上有一个数字,但不能输入他需要输入的数字。

如何在屏幕上显示数字键盘,并仍然允许使用Google Chrome查看网站的用户输入带有小数点的数字?

解决方案

创建该字段,如下所示:

 < input type =numberstep =0.1/> 

这将允许Chrome正确验证并且不会产生干扰。默认情况下,如果您未提供步骤值,则该值为1,但可以任何正面的浮动值



使用HTML5和XHTML doctype(两种工作方式)在Chrome 10,12中测试。 HTML示例:

 <!DOCTYPE html> 
< html>
< head>
< title>测试< /标题>
< / head>
< body>
< form>
< input type =numberstep =0.1/>
< / form>
< / body>
<! - doctypes
html5:<!DOCTYPE html>
html4:<!DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd\">
xtml:<!DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
- >
< / html>


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?

解决方案

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>

这篇关于如何防止Chrome格式化HTML5格式的数字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆