H5 input输入限制最大位数,和调用小键盘需求发生冲突的解决办法

首先,限制输入最大位数时,input有自带的属性maxlength。

<input type="text" name="email" maxlength="55" />

使用方法:maxlength="位数"

但是,对于这个属性他是有自己的限制条件的

定义和用法
maxlength 属性规定输入字段的最大长度,以字符个数计。maxlength 属性与 <input type="text"><input type="password"> 配合使用。

实际开发过程中,需求和理想状态是有差距的,限制位数的输入多为限制数字,比如金额,只个时候我们既要约束输入类型,同时还要限制位数。

在前辈的知道下,搭配tel属性可以实现效果,在手机上打开,激活输入框默认调用数字键盘。

 <input id="money" maxlength="8" type="tel" placeholder="50000" style="color:#333" />

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决vue项目在ie浏览器中不显示的问题

安装 “babel-polyfill” npm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev在入口 main.js 文件引入&#xff1a;import babel-polyfill在 build 文件下的 webpack.base.conf.js 文件中修改代码&#xff1a; entry: {app: ["babel-p…

Spark-Luanch Driver

1.SparkSubmit.scala主要调用M-prepareSubmitEnvironment&#xff0c;该方法更根据用户定义的参数&#xff0c;匹配不同client&#xff0c;去调用不同clientApp。(ps&#xff1a;本次讲ClientApp 也就是standalone)在M-runMain通过 调用M-Utils.classForName 反射的方式调用 …

大风大浪大鱼

一群年轻人常在一泓深潭边钓鱼&#xff0c;而有一个渔夫总是在潭上边水流湍急的河里捕鱼。 年轻人觉得这渔夫可笑&#xff0c;在大风大浪的河里怎么会捕到鱼呢?有一天&#xff0c;年轻人忍不住去问渔夫&#xff1a;“鱼能在这么湍急的地方停留吗?”渔夫说&#xff0c;当然不能…

清空表单时出现问题

打开页面时报警告&#xff1a; 解决办法&#xff1a; &#xff08;1&#xff09;npm i default-passive-events -S &#xff08;2&#xff09;main.js中加入&#xff1a;import ‘default-passive-events’ 参考&#xff1a;https://www.jianshu.com/p/23850d4cade8 出现原…

JQuery Ajax 使用FormData上传文件对象

FormData部分: 先new FormData对象 :let somedata new FormData(),然后将数据添加进去&#xff0c;这里我们使用append()进行添加。 这里举一个上传头像的例子&#xff1a; let token localStorage.token; let img $(".file")..get(0).files[0]; let somedat…

[探索][管理]《现在,发现你的优势》

此书是我迄今为止看过最棒的一本书&#xff01;&#xff01;&#xff01; 为什么这么说&#xff0c;因为就像前言彼得德鲁克所说的一样 -- 大部分的人都不知道他们的优势何在。此书的宗旨就是测试你的优势是什么&#xff0c;并且发展你的优势。为何要去改变你不擅长的东西呢&am…

box2d——1.tiles瓦片积木

【调试渲染】 将TestCpp里Box2DTestBed的GLES-Render.h/cpp加入到项目中。声明绘制变量&#xff1a;GLESDebugDrawmDebugDraw。 【创建世界】 // 依据重力创建世界b2Vec2 gravity;gravity.Set(0.0f, -10.0f);mWorld new b2World(gravity);// 设置调试渲染和碰撞侦听mWorld-&…

如何在JSF中实现自定义密码强度指示器

使用JavaScript验证密码强度是一项常见任务。 在本文中&#xff0c;我将展示如何向基于JSF的Web应用程序添加密码强度指示器。 的 PrimeFaces中的密码组件已经具有密码强度的反馈指示符&#xff0c;但是它有两个主要缺点&#xff1a; 反馈指示器没有响应&#xff08;固定宽度…

CSS 学习路线(二)选择器

选择器 规则结构: 分两个基本部分 选择器(selector)和声明块(declaration block) 组成 声明块:由一个或多个声明组成,每一个声明都是属性-值对 选择器分为:元素选择器,类选择器,后代选择器,通配选择器,ID选择器,属性选择器,伪类选择器.子元素选择器,相邻兄弟选择器. 元素选…

关于vue打包的问题

一、vue-cli2 二、vue-cli3 一、vue-cli2 错误提示&#xff1a; npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! hewelry1.0.0 build: node build/build.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the hewelry1.0.0 build script. npm ERR! This is prob…

关于==和equals的区别和联系,面试这么回答就可以

长篇大论的话&#xff0c;我这里就不多写了&#xff0c;相信大家入门java 的时候就知道个大概了&#xff0c;这里想表述的是&#xff0c;如果面试官问你《关于和equals的区别》&#xff0c;该怎么回答完美呢&#xff1f;可以这样说 总结的来说&#xff1a; 1&#xff09;对于&a…

如何使用新的Apache Http Client发出HEAD请求

如果您已更新Apache HTTP Client代码以使用最新的库&#xff08;在撰写本文时&#xff0c;它是4.2.x版本的httpclient 4.3.5版本和httpcore 4.3.2版本&#xff09;&#xff0c;您会注意到某些类&#xff08;例如org.apache.http.impl.client.DefaultHttpClient或org.apache.htt…

Delphi中禁止WebBrowser右键的方法

usesMSHtml;//在控件标签additional中找到TApplicationEvents控件&#xff0c;拖到窗体上&#xff0e;在TApplicationEvents的OnMessage事件中加入以下代码&#xff1a;//替换右键菜单procedureTForm1.ApplicationEvents1Message(varMsg: tagMSG; varHandled: Boolean);varmPoi…

【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信

父子 A 组件与 B 组件之间的通信&#xff1a; &#xff08;父子组件&#xff09; 如上图所示&#xff0c;A、B、C三个组件依次嵌套&#xff0c;按照 Vue 的开发习惯&#xff0c;父子组件通信可以通过以下方式实现&#xff1a; A to B 通过props的方式向子组件传递&#xff0c…

html笔记(一)html4+css2.0、css基础和属性、盒模型

w3c 官网 这里是 html4 的内容 大标题小节一、关于HTML1. 基本语法2. HTML常用标签3. 相对路径和绝对路径二、css基础1. 表单元素2. 创建样式表3. css语法4. css选择器三、css的相关属性1. 列表 li 独有的属性list-style2. 边框属性border3. overflow4. 浮动 float 遇到的坑5.…

JUnit:使用Java 8和Lambda表达式测试异常

在JUnit中&#xff0c;有许多方法可以在测试代码中测试异常&#xff0c;包括try-catch idiom JUnit Rule和catch-exception库。 从Java 8开始&#xff0c;我们还有另一种处理异常的方法&#xff1a;使用lambda表达式。 在这篇简短的博客文章中&#xff0c;我将演示一个简单的示…

动态语言和静态语言的比较

一 、静态语言的优势到底在哪&#xff1f; 来自robbin 摘自 http://www.javaeye.com/article/33971?page7 引用是像Java或者C&#xff03;这样强类型的准静态语言在实现复杂的业务逻辑、开发大型商业系统、以及那些生命周期很长的应用中也有着非常强的优势这是一个存在于大家心…

sqlserver2012——使用子查询

1 select A.成绩&#xff0c;A.分数,B.姓名 FROM 成绩信息 A, 学生信息 BWHERE A.学生编号B.学号 AND A.课程编号‘2’ AND A.考试编号‘0801’ AND A.分数 <( SELECT AVG(分数) FROM 成绩信息 A&#xff0c;学生信息 B where A.学生编号B.学号 AND A.课程编号‘2’ and A.…

返回顶部小火箭

代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style&…

最佳5本Java性能调优书籍–精选,必读

为什么Java开发人员应该阅读有关性能调优的书&#xff1f; 当我很久以前第一次面对这个问题时&#xff0c;我以为以后会做&#xff0c;但是我很长一段时间都没有回过头来。 仅当我在用Java编写的任务关键型服务器端财务应用程序中遇到严重的性能和可伸缩性问题时&#xff0c;我…