用number输入框限制输入数字位数、字体随数字长度变化方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用number输入框限制输入数字位数、字体随数字长度变化方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1547字，纯文字阅读大概需要3分钟。
内容图文
这里需要使用宽度相同的字体，比如数字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后变为1
if( (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输入框限制输入数字位数、字体随数字长度变化方法的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的用number输入框限制输入数字位数、字体随数字长度变化方法全部内容，希望文章能够帮你解决用number输入框限制输入数字位数、字体随数字长度变化方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】