html5 input number类型使用整理
<p><strong> <span style="color: rgba(255, 0, 0, 1)"> 一、 <code>html5 input</code>中的数字number类型</span>，</strong></p><p>只能输入整数，如果要<code>输入浮点数</code>呢，可以通过<code>max</code>、<code>min</code>和<code>step</code>去定义。</p>
<p> type="number" 数字类型</p>
<p> min="0" 最小值</p>
<p> min="100" 最大值</p>
<p> step="1" 点击右边上下按钮每次增加或减少的值</p>
<p> </p>
<p><strong>1.默认整数</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)">min</span><span style="color: rgba(0, 0, 255, 1)">="0"</span><span style="color: rgba(255, 0, 0, 1)"> max</span><span style="color: rgba(0, 0, 255, 1)">="100"</span> <span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<p><strong>2.浮点类型</strong></p>
<p> 在属性值后增加小数位数定义浮点类型数据的输入</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)">min</span><span style="color: rgba(0, 0, 255, 1)">="0.00"</span><span style="color: rgba(255, 0, 0, 1)"> max</span><span style="color: rgba(0, 0, 255, 1)">="100.00"</span><span style="color: rgba(255, 0, 0, 1)"> step</span><span style="color: rgba(0, 0, 255, 1)">="0.01"</span><span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<p> </p>
<p>如图，整数框和浮点数框：</p>
<p> </p>
<p><img src="https://img2018.cnblogs.com/blog/470800/201912/470800-20191216111320795-1377816426.png"></p>
<p> </p>
<p><span style="color: rgba(255, 0, 0, 1)"><strong>二、解决 html5 input type='number' 类型可以输入e</strong></span></p>
<p>当给 input 设置类型为 number 时，比如，我想限制，只能输入 0-9 的正整数，正则表达式如下：</p>
<p>/^?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次<br>用正则测试，小数点是无法通过的，且，因为 设置了类型为 number，也无法输入字母，</p>
<p>但实际上，1. 类似这样的不合规则的数字是可以通过验证的，且，可以键入字母 e，因为 e 在数学上代表2.71828，也是一个数字。</p>
<p>解决办法如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">='number' </span><span style="color: rgba(255, 0, 0, 1)">οnkeypress</span><span style="color: rgba(0, 0, 255, 1)">='return( </span><span style="color: rgba(255, 0, 0, 1)">/[\d]/.test(String.fromCharCode(event.keyCode) ) )' </span><span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<p>这样，就不能输入 e 或者 小数点了</p>
<p> </p>
<p>更多：</p>
<p>屏幕方向读取与锁定：Screen Orientation API(转)</p>
<p>苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位</p>
<p>HTML5 Selection对象</p><br><br>
来源：https://www.cnblogs.com/tianma3798/p/12048140.html
頁:
[1]