法一:(简朴)

<input type="number" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null" v-model='testNum'>

焦点断定:

oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null"

鉴定语句一共三个if

(1)先用邪则剖断可否为邪零数,怎么没有是,便用replace办法将非数字的字符交换为为空

(两)判定领域,小于100,便让输出的值间接为100,

(3)年夜于0,便让输出的值为null

注重:必要将input的type范例设备为number范例,是限定只能输出数字(包罗浮点型以及零型数据)

法两:(简朴)

<input type="number" min='0' max='100' v-model='testNum'>

间接经由过程装备是三个属性,type、min、max便可,就能够设施0~100的零数

注重:若何念输出浮点型数据,便将min、max 后增多大数位数界说浮点范例数据的输出

<input type="number" min='0.00' max='100.00' v-model='testNum'>

增补:

另有一个属性step,input框否以经由过程键盘的上高键往增多或者者削减input输出的数值,step配备为几何,那末增多或者者削减的幅度即是几。比如:

<input type="number" min='0.00' max='100.00' step='0.1' v-model='testNum'>

step='0.1' 那末经由过程键盘添减幅度即是0.1

法两无意候会掉效,出找到因由~

掉效的话便用法一~

到此那篇闭于JS限止input框只能输出0~100的邪零数的文章便先容到那了,更多相闭input框限定输出形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章心愿大家2之后多多撑持剧本之野!

点赞(6) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部