首页 > 其他分享 >input number 数字输入限制

input number 数字输入限制

时间:2023-04-13 17:00:29浏览次数:37  
标签:24 限制 数字 number value input 输入

转自:https://blog.csdn.net/qq_43535970/article/details/127516919

input number 数字输入限制,最大值最小值输入范围限制
前言
有时候我们会有一些需求限制输入数字的大小,比如一个24小时数字输入框,7天数字输入框等等,这个时候我们就需要单独进行处理了。

解决方案
我看了看网上,解决方案不少,总结了一下,有以下几种方式。
方式一: max=“10”,min=“1” 限制最大值为10,最小值为1
这种方法非常便捷,但值得注意的是,这种方式限制的是数字输入框右边的增减箭头按钮,最大值和最小值,不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数,还是无法限制。

<input type="number" max="100" min="10" value="">
1
方式二:
使用input标签的oninput方法,在输入时进行监听,当判断打到某个条件时,进行处理将值替换成我们想要的数值。
// 限制长度:输入三位数的数字

<input type="number" oninput="if(value.length>4)value=value.slice(0,4);" />
1
// 限制大小 大于等于0 但小于等于24的整数
<input type="number" oninput="if(value<=0)value=0;if(value>=24)value=24;value=parseInt(value)" />

 

*******************************************************************************************************************************************

 

转自:https://blog.csdn.net/weixin_64630810/article/details/126836748

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 事件,完美的解决了以上两种问题,暂时还没有出现其它问题。
————————————————
版权声明:本文为CSDN博主「A-炜晨科技」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_64630810/article/details/126836748

标签:24,限制,数字,number,value,input,输入
From: https://www.cnblogs.com/hadas/p/17315457.html

相关文章

  • input输入框只能输入数字,只能输入字母数字组合
    转自:https://www.jianshu.com/p/fc5d02cdf3d7输入大小写字母、数字、下划线:<inputtype="text"onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">输入小写字母、数字、下划线:<inputtype="text"onkeyup="this.value=this.value.......
  • 微信小程序当input框中的值改变时获取input框的值
    微信小程序当input框中的值改变时获取input框的值wxml文件,input框值改变触发inputHandler函数<inputstyle="border:1pxsolid;"type="text"bindinput="inputHandler"/>js文件inputHandler(e){console.log(e.detail.value)}......
  • 输入框(input) 样式
     使用width属性来设置输入框的宽度:CSS实例input{width:100%;}尝试一下»以上实例中设置了所有<input>元素的宽度为100%,如果你只想设置指定类型的输入框可以使用以下属性选择器:input[type=text] -选取文本输入框input[type=password] -选择密码的输入框in......
  • C# 限制输入为字母或数字以及长度
    日常开发过程中,验证字符的合法性一直是一个必不可少的步骤,以前都是在用户输入完再做判断,不仅麻烦在不符合标准的时候还要提示用户修改,体验很差,为什么不在输入的时候加以限制呢?以Winform的TextBox控件为例,这里提供两种方案:通过字符匹配正则表达式在用户输入时限制,所以选用......
  • 2-15 编写一个程序,运行时输入一个数字,再把这个数字显示出来
    设计思路:首先要有输入,然后在缓冲区输入想要显示的部分,再设计输出格式并输出显示数据。流程图: 伪代码:#include<stdio.h>  //头文件intmain(){printf("ENTERDATE:");  //显示“ENTERDATE:”inta;//定义一个数据ascanf("%d",&a);//输入......
  • 4-20ma输入0-10v输出模拟量电流转换电压隔离模块
    主要特性:⑴精度等级:0.1级、0.2级、0.5级。产品出厂前已检验校正,用户可以直接使用⑵辅助电源:5V/12V/15V/24VDC或者220VAC(范围±10%)⑶国际标准二路信号输入:0-5V/0-10V/1-5V,0-10mA/0-20mA/4-20mA等⑷二路输出标准信号:0-5V/0-10V/1-5V,0-10mA/0-20mA/4-20mA等,具有高负载能力⑸全量......
  • 针对form 表单 只有一个输入框的时候 使用回车查询会刷新页面问题
    <el-form:model="queryParams"ref="queryForm" :inline="true"v-show="showSearch"label-width="68px"@submit.native.prevent>   <el-form-itemlabel="表单名"prop="name">......
  • UVa 11723 Numbering Roads (water ver.)
    11723-NumberingRoadsTimelimit:1.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&page=show_problem&problem=2823Inmycountry,streetsdon’thavenames,eachofthemarejustgivenanumber......
  • UVa 350 Pseudo-Random Numbers (伪随机数的循环长度)
    350-Pseudo-RandomNumbersTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=100&page=show_problem&problem=286Computersnormallycannotgeneratereallyrandomnumbers,butfrequentlyar......
  • UVa 443 / POJ 2247 Humble Numbers (4因子-丑数&STL灵活运用)
    443-HumbleNumbersTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&page=show_problem&problem=384http://poj.org/problem?id=2247Anumberwhoseonlyprimefactorsare2,3,5or7isc......