一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的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. SpringBoot与动态多数据源切换

      本文简单的介绍一下基于SpringBoot框架动态多数据源切换的实现,采用主从配置的方式,配置master.slave两个数据库. 一.配置主从数据库 spring: datasource: ty ...

  2. AOP使用

    package com.googosoft.db.aspect; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lan ...

  3. 每天进步一点点------Xilinx DCM

    时钟---锁相环 1.       Xilinx DCM 数字时钟管理模块(Digital Clock Manager,DCM)是基于Xilinx的其他系列器件所采用的数字延迟锁相环(DLL,Dela ...

  4. P2141珠心算测验题解

    先来看一下题目:某学校的珠心算老师采用一种快速考察珠心算加法能力的测验方法.他随机生成一个正整数集合,集合中的数各不相同,然后要求学生回答:其中有多少个数,恰好等于集合中另外两个(不同的)数之和? 这 ...

  5. codeforces C. Primes and Multiplication（快速幂 唯一分解定理）

    题目链接:http://codeforces.com/contest/1228/problem/C 题解:给定一个函数f,g,题目有描述其中的表达式含义和两者之间的关系. 然后计算: 首先把给定的x用 ...

  6. python开发基础02-字符串操作方法练习题

    1.执行 Python 脚本的两种方式 python解释器 py文件  #!/usr/bin/env python 进入python解释器,便捷命令并执行 pycharm或其他pythonIDE sh ...

  7. 【应急响应】Tomcat安全加固

    一.删除或选定无效账号 二.密码复杂度 三.启用日志记录功能 四.登录超时 五.Tomcat错误页面重定向 六.禁止Tomcat目录列表显示文件

  8. Logarithmic-Trigonometric积分系列（一）

    \[\Large\displaystyle \int_{0}^{\frac{\pi }{2}}x^{2}\ln\left ( \sin x \right )\ln\left ( \cos x \rig ...

  9. knn 算法 k个相近邻居

    # 一个最基本的例子 #样本数据的封装 feature = [[170,70,42],[166,56,39],[188,90,44],[165,88,40],[170,66,40],[176,80,4 ...

  10. 普通的javaweb项目和用maven管理的javaweb project的目录结构的区别

      图一,图二 这种就是单独的建立普通的(也就是没有用maven管理包)javaweb项目的结构目录,这种需要将普通的jar依赖放到lib目录下,之后通过bulid   图一