• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > number输入框限制输入数字位数、字体随数字长度变化

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

作者:张营 字体:[增加 减小] 来源:互联网 时间:2017-09-22

本文主要包含number,字体随长度变化,小数位等相关知识,张营希望在学习及工作中可以帮助到您

需求:
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输入框限制输入数字位数、字体随数字长度变化

相关文章

  • 2017-08-05在HTML文档中嵌入CSS的三种常用方式
  • 2017-08-05表单元素与提示文字无法对齐的问题
  • 2017-08-05多种实例解析HTML表单form的使用方法
  • 2017-08-05HTML head 头标签详细介绍
  • 2017-08-05单选按钮、多选按钮用图片实现加样式
  • 2017-08-14HTML表格与框架
  • 2017-08-05HTML (css样式规范)必看篇
  • 2017-08-05让输入框关闭自动完成(AutoComplete)功能
  • 2017-08-05移动端HTML5实现文件上传
  • 2017-08-05关于IE8兼容:X-UA-Compatible属性的解释

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • zen coding 资源更新 功能增强
    • 浅谈HTML的doctype和编码
    • HTML基础之HTML内容细则
    • 无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法
    • html页面跳转传递参数问题
    • 如何设置select只读不可编辑且select的值可传递
    • 通过CSS样式实现的html背景色渐变效果
    • meta标签详解(meta标签的作用)
    • WEB标准 网页页面结构
    • margin-top负值解决label 文字与input 垂直居中对齐问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有