一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的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. MySQL数据库、数据表和字段字符集查询、修改和配置

    一.设置编码 LINUX  修改vi/etc/my.cnf WINDOWS my.ini 在[client]下添加    default-character-set=utf8 在[mysqld]下添加 ...

  2. [MC] 我的世界 craftbukkit-1.12.2 卡爆

    昨天晚上的时候,和朋友玩我的世界 结果我这边卡爆了,牛圈里面的牛都是一动一动的... 然后我登陆服务器,发现CPU爆炸了... 100%的使用率 mstsc都卡爆了 内存占用了800多MB (服务器是 ...

  3. 牛客多校第一场 A Equivalent Prefixes 单调栈（笛卡尔树）

    Equivalent Prefixes 单调栈(笛卡尔树) 题意: 给出两个数组u,v,每个数组都有n个不同的元素,RMQ(u,l,r)表示u数组中[l,r]区间里面的最小值标号是多少,求一个最大的m ...

  4. HDU多校第三场 Hdu6606 Distribution of books 线段树优化DP

    Hdu6606 Distribution of books 题意 把一段连续的数字分成k段,不能有空段且段和段之间不能有间隔,但是可以舍去一部分后缀数字,求\(min(max((\sum ai ))\ ...

  5. 给Python初学者的一些编程技巧

    展开这篇文章主要介绍了给Python初学者的一些编程技巧,皆是基于基础的一些编程习惯建议,需要的朋友可以参考下交换变量 x = 6y = 5 x, y = y, x print x>>&g ...

  6. Mysql sql语句技巧与优化

    一.常见sql技巧 1.正则表达式的使用 2.巧用RAND()提取随机行 mysql数据库中有一个随机函数rand()是获取一个0-1之间的数,利用这个函数和order by一起能够吧数据随机排序, ...

  7. C语言实例-大小写字母间的转换

    初学C语言都会遇到要求写大小写转换的题目 这类题目主要通过ASCII(美国信息交换标准代码)码差值实现,A对应ASCII码十进制数字是65,a对应ASCII码十进制数字是97,即大小写字母之间ASCI ...

  8. ASP.NET CSRF 解决【网摘】

    http://stackoverflow.com/questions/29939566/preventing-cross-site-request-forgery-csrf-attacks-in-as ...

  9. numpy-sum函数

    看一个例子就懂了 c = array([[[0, 1, 2, 0, 1, 2]], [[0, 1, 2, 0, 1, 2]]]) print('{0}\n'.format(c.shape)) prin ...

  10. ScheduledThreadPoolExecutor与Timer

    首先来看一下Timer类 例子如下: package cn.concurrent.executor; import java.util.Timer; import java.util.TimerTas ...