表单系列之input number总结

今天药忘吃喽~ 2022-03-07 04:08 192阅读 0赞

![clipboard.png][]

# 各浏览器表现 #

<input type="number" />

**chrome**  
![clipboard.png][clipboard.png 1]

> 除数字字符，只可输入e和.

**IE**  
![clipboard.png][clipboard.png 2]

> 除数字字符，其他字符均可输入，无报错

**Firefox**  
![clipboard.png][clipboard.png 3]

> 除数字字符，其他字符均可输入，但会报错

# 移除箭头 #

//谷歌去除箭头 
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    
    //火狐去除箭头 
    input[type="number"] {
        -moz-appearance: textfield;
    }

# maxlength无效 #

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />

# step/min/max #

**允许小数值**

<input type="number" placeholder="1.0" step="0.01" min="0" max="10">

# 小知识点 #

<label for="ticketNum">Number of tickets you would like to buy:</label>
    <input id="ticketNum" type="number" name="ticketNum" value="0">

![clipboard.png][clipboard.png 4]

配合label for，点击label，就可让input获取焦点。

[clipboard.png]: /images/20220307/e78db6927fe04f0294b277f8327fa395.png
[clipboard.png 1]: /images/20220307/69788c7b24d7442288051198a5d07f55.png
[clipboard.png 2]: /images/20220307/6d81716d352c4f3e8c0b87a09cc61bd9.png
[clipboard.png 3]: /images/20220307/247b24eb0dd94a28a7e0d06f3272a095.png
[clipboard.png 4]: /images/20220307/a51ae6ce69de4be9b952782099775c0a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML笔记：表单input标签

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表单标签 from：表单的最外层容器 input：标

短命女/ 2023年03月04日 10:30/ 0 赞/ 170 阅读

相关 input表单监听

input表单监听 `oninput="if(value >100){value = '100'}else if (value < 1 ){value = '1'}"`i

灰太狼/ 2023年01月14日 06:59/ 0 赞/ 156 阅读

相关 vue 表单 input checkbox

<body> <div id="app"> <div> <span>爱好：</span>

分手后的思念是犯贱/ 2023年01月07日 08:49/ 0 赞/ 144 阅读

相关 vue 表单 input radio

<body> <div id="app"> <div> <span>性别：</span>

末蓝、/ 2023年01月07日 08:49/ 0 赞/ 203 阅读

相关 vue 表单 input text

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

不念不忘少年蓝@/ 2023年01月07日 08:47/ 0 赞/ 158 阅读

相关【前端开发总结】表单操作系列

文章目录（一）常用操作整理（1）Select标签操作 1. 基础操作 2.

蔚落/ 2022年09月11日 03:20/ 0 赞/ 168 阅读

相关 input表单

![70][] ![70 1][]![70 2][] ![70 3][] input 输入值内容居中：text-align:center

一时失言乱红尘/ 2022年05月28日 05:27/ 0 赞/ 189 阅读

相关 iview form表单校验 input number 报出number不能为空

在iview表单校验中，需要指定校验类型，不然给表单赋予新值时会出问题。比如，报错不能为空，特别是number类型。 <Form :model="changeM

电玩女神/ 2022年03月14日 10:30/ 0 赞/ 1066 阅读

相关表单系列之input number总结

![clipboard.png][] 各浏览器表现 <input type="number" /> chrome ![clipboard.png][cli

今天药忘吃喽~/ 2022年03月07日 04:08/ 0 赞/ 193 阅读

相关表单系列之input number总结

![clipboard.png][] 各浏览器表现 <input type="number" /> chrome ![clipboard.png][cli

柔光的暖阳◎/ 2022年03月07日 04:08/ 0 赞/ 256 阅读