number输入框限制输入数字位数、字体随数字长度变化

这里需要使用宽度相同的字体，比如数字1和数字8是等宽的，这里使用的是dinpro-regular.otf

需求：
1.允许输入15位整数，两位小数
2.输入框宽度固定，字体随内容的长度变化
3.禁止输入多个0开头
ps: 以上前提是用户输入的是数字，非数字报错处理(判断是否为空)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding:0;}@font-face{font-family: "dinpro";src: url("font/DINPro-Regular.otf");}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}#aa{width: 300px;height: 50px;font-size: 40px;font-family: "dinpro";}</style>
</head>
<body>
<input type="number" id="aa">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">$("#aa").on("input",function(){var value = $(this).val();if(value.indexOf(".")==-1){//没有小数点//禁止输入多个0开头 输入00变为0  输入01后变为1if( (parseFloat(value)==0 && value.length>1) || (parseFloat(value)!=0 && value.charAt(0)=="0") ){$(this).val(value.substring(1));}if(value.length>15){$(this).val(value.slice(0,15));}}else{//有小数点//取两位小数$(this).val(Math.floor(value*100)/100);}//控制字体大小  14是输入框刚好可以显示的数字位数，具体根数实际情况设置if($(this).val().length>14){$(this).css("font-size",40*(14/$(this).val().length)+"px");}else{$(this).css("font-size","40px");}});
</script>
</body>
</html>

number输入框限制输入数字位数、字体随数字长度变化相关推荐

input框5连--输入框不可输入以0开头的数字但是可以输入带0的数字常用正则
第一弹:input框只能输入数字缺能输入e的原因.链接:input框1连–数字输入框能输入e的原因第二弹:input框限制用户输入长度,超出长度不可输入.链接:input框2连–限制用户输入长度第 ...
python判断数字位数_python求数字位数的方法
第一种: 利用str()函数将数字转化成字符串,再利用len()函数判断位长. 1 a=Int(raw_input("the number you want type in:") ...
输入字符串，计算占据英文长度
最近遇到一个解析 shell 命令返回的表格形式的返回的需求. 由于返回即有中文也有英文,而且返回的项也可能包含空格,故需要计算每列占据的长度,从而截取解析. 但是中文和英文占据的长度不一致,故用到此 ...
input输入框只能输入11位数字
input输入框只能输入11位数字 <input type="number" οninput="if(value.length>11)value=value. ...
input数字输入框可以输入e的原因
今天在查看表单实例的时候,发现了一个只能输入数字的input,却可以输入e字母, <Input type="number" v-model.number="form ...
【 javascript】＜input＞实现输入框只能输入数字（个人认为最好的）
<input> 实现输入框只能输入数字需求背景: 方案一:使用`JS`限制 input 输入框只能输入纯数字方案二:`VUE`使用`a-input-number组件`限制 input ...
数字输入框不能输入小数
PM: 这个数字输入框不能输入小数面对这个问题,有两种方法可以解决, 可以按照两种方法来解决这个问题, 具体现在哪种可以看需求处理对小数四舍五入给 Input 添加 precision 属性 & ...
输入框限制只能输入数字，正数、负数、0，最多两位小数；数字输入框可以输入负数，并最多保留两位小数；el-number-input去掉四舍五入和自动补齐小数；
场景: –要求1:输入框只能输入数字,可以使正数.负数.0,小数点最多保留两位. –要求2:不需要自动补齐小数点,也不需要自动四舍五入. element-ui的数字输入框el-input-number ...
输入一个三位数，分别求出x的个位数字，十位数字，百位数字的值。
#include<stdio.h>int main(void){ int x;scanf("%d",&x);printf("%d %d %d\n&qu ...

number输入框限制输入数字位数、字体随数字长度变化

number输入框限制输入数字位数、字体随数字长度变化相关推荐

最新文章

热门文章