1、限制input最大长度

<input type="text"  maxlength="5" />   //可以

<input type="number"  maxlength="5" />  //没有效果

<input type="number" οninput="if(value.length>5) value=value.slice(0,5)" /> //js控制,可以

<input type="tel"  maxlength="5" />  //tel类型,可以

此外,tel类型的input在ios上会调出全数字键盘,而number类型的input则会调出带有标点符号的键盘。

2、限制input输入框为纯数字:
         a、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

b、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

c、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件,完美的解决了以上两种问题,暂时还没有出现其它问题。
————————————————
原文链接:https://blog.csdn.net/sk_shenghuo/article/details/89329022

input 限制长度相关推荐

  1. input输入长度与限制内容

    1.限制input最大长度 <input type="text"  maxlength="5" />   //可以 <input type=& ...

  2. 设置input输入长度 中文一个文字等于2个引文字符 为了解决这个问题

    /** * 设置input输入长度 中文一个文字等于2个引文字符 为了解决这个问题 * 使用 maxcodelength="" 即可 */ $('input[type=" ...

  3. 的input最大长度_LeetCode 84 | 单调栈解决最大矩形问题

    今天是LeetCode专题第52篇文章,我们一起来看LeetCode第84题,Largest Rectangle in Histogram(最大矩形面积). 这道题的官方难度是Hard,点赞3581, ...

  4. input输入长度 vue_Vue实现input宽度随文字长度自适应操作

    业务需求,输入文字,后面的元要紧随其后,奈何input默认是有宽度,我想要达到,输入文字,动态改变input的宽度,试了很多方法,目前自己琢磨一种,有遇到问题的可以参考一下, 直接贴代码 type=& ...

  5. 限制input输入长度与内容

    1.限制输入长度 如果输入的是数字(type是number类型),通过监听input事件再通过slice进行截取限制长度 <input type="number" oninp ...

  6. Vue中实现input框长度自动适应文本长度

    在公司业务中遇到这样一种情形: 需要根据input框里内容来实时改变input框的长度,否则input过长会影响拖拽,过短则会导致内容显示不全. <input:id="index&qu ...

  7. css设置input框长度_干货极致分享浅谈CSS属性,有趣的盒模型。网友:哎呦不错哦!...

    盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

  8. input最大长度限制问题

    <input type="text" maxlength="5" /> //可以<input type="number" ...

  9. input输入框长度

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的.教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈-我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转 ...

最新文章

  1. 【Python学习系列十二】Python库pandas之CSV导入
  2. linux日志文件备份,linux配置文件、日志文件全备份
  3. 【Python】ConvergenceWarning: Maximum number of iterations 200 reached. Increase it to improve...
  4. Android学习笔记---Android利用Sqlite,并且用sql语言操作SQLite数据库
  5. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。...
  6. win版mysql下载_MYSQL下载及安装--windows版本
  7. 一篇文章教会你用Python抓取抖音App热点数据
  8. 在腾讯云开通短信验证服务并完成群发消息测试
  9. 招聘面试的套路与原则
  10. Android dialog弹出报错Alert Dialog Unable to add window android.view.ViewRootImpl$W. permission denied
  11. MacOS技巧|Mac如何自定义触控栏Touch Bar?显示Touch Bar教程
  12. 《无聊教程●第一课●教你编一个牛逼的VBScript邮件发送器》
  13. 中央空调系统运行原理以及相关设备介绍
  14. uniapp中使用百度名片识别接口或名片全能王识别接口
  15. python向量计算库教程_python中numpy基础学习及进行数组和矢量计算
  16. Linux3._Linux环境基础开发工具使用
  17. 【读书笔记】减法——完美无缺,不是增无可增,而是减无可减
  18. laravel 教程
  19. Word2vec学习
  20. CSS盒模型(详解)

热门文章

  1. 缅怀TOC理论的创建者高德拉特先生
  2. Python基础-08
  3. Fabric 部署与管理
  4. 我不喜欢孤单,但是我喜欢享受孤独!
  5. python 端口扫描 东京_嗖嗖嗖!在Python中进行批量端口扫描 | 网络安全
  6. 基于JavaWeb电影系统分享【源码开源】
  7. 计算机不能访问网络录像机,电脑摄像头打不开不能进行视频对话怎么解决
  8. “在win7下用WebEx 播放器播放 *.wrf格式文件耳机没有声音” 解决方法
  9. Android Studio值得推荐的主题背景
  10. 渗透测试实例,xampp靶机实验