一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的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. win 下 docker 环境配置

    声明 此文只针对 win7.win10 家庭版等用户操作系统,因为这些系统无法使用 windows 的 Hyper-V 虚拟技术.只能借助于 Virtual Box 虚拟机来使用 docker. Do ...

  2. jenkins部署到Tomcat下

    一.首选要下载与安装jdk,因为需要在Java环境下面运行,安装好jdk后配置java环境变量(jdk环境变量的配置网上很多) 我本人安装的是jdk1.8 二.安装好jdk后,需要下载tomcat,这 ...

  3. linux软件下载

    可以到linux官网下载:http://vault.centos.org/6.10/os/Source/SPackages/

  4. @RequestMapping(value = {"list", ""})

    https://www.cnblogs.com/tongs/p/7486478.html   @RequestMapping是请求路径的注解 里面写两个value就是,路径可以是这两个, 第二个空,是 ...

  5. Jarvis OJ - 软件密码破解-1 -Writeup

    Jarvis OJ - 软件密码破解-1 -Writeup 转载请标明出处http://www.cnblogs.com/WangAoBo/p/7243801.html 记录这道题主要是想记录一下动态调 ...

  6. Vue 实现todolist的添加删除功能

    直接上代码 vm.$emit( eventName, [-args] ) 触发当前实例上的事件 可选附加参数 传给监听器回调. <style> #app{ margin: 100px; } ...

  7. mongo日常命令集锦

    查询某个字段是否存在 db.student.findOne({name:{$exists:true}}) db.student.findOne({'department.name':{$exists: ...

  8. 虚拟机kali Linux 的网络配置

    首先打开虚拟机中的kali 发现是没有办法连网的 然后我们将kaili关闭 然后打开 然后看黄色区域选择桥接模式然后重新启动即可 https://jingyan.baidu.com/article/7 ...

  9. Spring - 周边设施 - H2 数据库启动时写入数据

    1. 概述 之前讲到了 H2 的引入 这下我想说说 H2 启动时的 数据导入 2. 场景 需求 启动项目后, H2 启动起来 环境数据会自动注入 H2 数据库 可以验证是否成功 3. 环境 os wi ...

  10. 传奇脚本中 SendMsg 编号说明

    0 1 2 3 4 5 60对全服人说1.发送普通红色广播信息. 2.发送普通红色广播信息,并显示NPC名称. 3.发送普通红色广播信息,并人物NPC名称. 4.在NPC头顶,显示普通说话信息. 5. ...