一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的input框的类型设置为number时，input框还是可以无限输入，设置maxlengh=10就不起作用了。
然后我就去百度了一下，type设置为tel时，maxlength就起作用了。为什么呢？
这里我先说一下input框type=tel和type=number的区别。
首先HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。
但是type并不能作为验证依据,
type字段只是为输入提供选择格式,
更多情况下应该说新增的type是为了适配移动端web app的存在
例如说当type=tel的时候,在手机上打开页面会出现电话键盘(不是数字键盘,两者并不一样,电话键盘还包括*和#)
当type=email的时候,会出现带@和.com符号的全键盘(各设配各系统实现貌似有差异)
所以才要有pattern的存在,
当触发表单提交的时候,浏览器会将输入与pattern属性做匹配来最终判断是否有效输入
当然了,后端验证数据有效性就在此问题的范畴之外了；

解决方案

<input type="number" name="phone" id="phone" value="phone" oninput="if(value.length>11)value=value.slice(0,11)" />

input输入框type设置为number，maxlength无效的更多相关文章

  1. input输入框type=number时的一个缺陷

    本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...

  2. input 输入框type='search'去掉×

    input输入时,为了让ios键盘的前进会变为搜索,设置input的type='search'但是安卓输入框后面会出现个小叉,实际不需要这个× 解决办法: input[type=search]::-w ...

  3. 关于input输入框内设置小图标的问题

    其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...

  4. input输入框type=file时accept中可以限制的文件类型（转载）

    转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...

  5. input 输入框背景色设置为透明

  6. vue引入fastclick设置输入框type="number"报错Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.的解决办法

    将输入框type设为text,通过正则验证输入的值

  7. 解决input为number类型时maxlength无效的问题

    使用input数字number类型的时候maxlength无效,假设需要控制输入数量为18,可以用以下方式: 无效: <input type="text"  maxlengt ...

  8. 解决input,number类型的maxlength无效

    使用input数字number类型的时候maxlength无效,假设需要控制输入数量为5,可以用以下方式: 无效: <input type="text"  maxlength ...

  9. html：input的type=number的时候maxlength失效问题

    <input type="text"  maxlength="5" />   效果ok,当 <input type="number& ...

随机推荐

  1. mybatis（六）：设计模式 - 工厂方法模式

  2. vue + elementui表单重置 resetFields问题（无法重置表单）

    问题: elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 1 ...

  3. LED Decorative Light Manufacturer - LED Neon Rope: 5 Advantages

    In the past 100 years, lighting has come a long way. Nowadays, the decorative LED lighting design ca ...

  4. JSP读取数据库二进制图片并显示

    用JSP从数据库中读取二进制图片并显示在网页上 环境mysql+tomcat: 先在mysql下建立如下的表. 并存储了二进制图像(二进制格式存储图片可以参考我的另一篇博客:https://www.c ...

  5. CSS-透明背景色兼容

    IE 不支持透明背景色 使用fileter div{ backgournd: #666; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5 ...

  6. opencv：自适应阈值

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...

  7. 折纸(folding)

    问题 C: 折纸 时间限制: 1 Sec  内存限制: 128 MB[提交] [状态] 题目描述 现有一个W*H的矩形纸张,求至少要折多少次才能使矩形纸张变成w*h的矩形纸张.注意,每次的折痕都要平行 ...

  8. 前端——语言——Core JS——《The good part》读书笔记——第五章节(Inheritance)

    本章题目是继承,实质上介绍JS如何实现面向对象的三大特性,封装,继承,多态.本章的最后一个小节介绍事件. 与Java语言对比,虽然名称同样称为类,对象,但是显然它们的含义存在一些细微的差异,而且实现三 ...

  9. 【游戏体验】Buttonhunt（鼠标寻找按钮）

    虽然画风千奇百变 但这款益智游戏的趣味性相当高 推荐试玩 个人测评 游戏性 9/10 音乐 4/10 剧情 6/10 总评 19/30

  10. A. DZY Loves Chessboard

    DZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m columns. So ...