html5的Input Type : Number,分享自己的一些认识!

在HTML5中,可以有许多输入字段作为一个微调器你向上和向下箭头在右边的文本框增加或减少数量的值。请看下面的spinner gallery作为案例。


写作,web浏览器,在Windows是Google Chrome,Opera的工作。
浏览器呈现“数量”输入来源
ie9 Beta版
火狐13
Safari 5✓(在Mac OS,而不是Windows)
Chrome 8✓
Opera 11✓
让我们有一些真正的演示,你可以通过你自己碰它。

<label for="movie">How often you watch movie in week : </label><input id="movie" type="number" value="0"/>
如果您使用的是Google Chrome 8,试着输入一个非数字值像“a”、“B”,”?”,Chrome不会允许你这样做,但它允许您输入“e”?为什么是这样吗?因为“e”可以是一个浮点数的一部分。例如:5.34 e + 12
另一方面,歌剧允许你输入任何你喜欢的。
我们将探讨一些重要的属性,我们可以在许多类型(<input type="number">)输入。
属性描述
值值是默认值的输入框当一个页面是第一次加载。这是一种常见的属性对<输入>元素无论您使用的是何种类型。
分钟很明显,你数的最小值。我应该指定最小值为0为我演示了为负数没有意义的电影看了一个星期。
马克斯apprently,这代表了最大数量的输入数量。
一步一步比例因子,默认值是1如果没有指定这个属性。
让我们有另一个演示,如果你是软件公司,软件销售的数量的用户许可,最小许可你卖5,每增加5、最大许可/客户你可以卖30。

<label for="user_lic">Number of user license : </label><input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/>

如果你碰巧使用javascript来增加和减少的价值,这是解决方案。
spinner.stepUp x(x)——被你想增加的价值。
spinner.stepDown x(x)——在你想要的价值减少。
微调控制项。valueAsNumber——返回值的输入浮点数,而不是字符串。
转子与相对微小的向上/向下箭头可能不是非常的手指友好的触摸屏应用程序。iPhone(iOS 4.2)和Android 2.2 web浏览器呈现<输入类型=“数量”>正常文本框但给用户一个数字键盘的数据输入。
左边的屏幕的iPhone(iOS 4.2)和宏达欲望(Android 2.2)在右边。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值