用number输入框限制输入数字位数、字体随数字长度变化方法-html教程-PHP中文网

首页

web前端

html教程

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

一个新手

Sep 22, 2017 am 10:07 AM

数字输入

这里需要使用宽度相同的字体，比如数字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输入框限制输入数字位数、字体随数字长度变化方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7504

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

禁用Win11输入体验指南 Dec 27, 2023 am 11:07 AM

最近有很多win11遇到了输入体验对话框总是闪烁，关也关不掉的问题，这其实是由于win11的默认系统服务和组件导致的，我们需要先禁用相关服务，再禁用输入体验服务就可以解决了，下面一起来试试看吧。win11输入体验怎么关闭：第一步，右键开始菜单，打开“任务管理器”第二步，依次找到“CTF加载程序”、“MicrosoftIME”和“服务主机：Textinputmanagementservice”三个进程，右键“结束任务”第三步，打开开始菜单，在上方搜索并打开“服务”第四步，在其中找到“Textinp

Windows输入遇到挂起或内存使用率高的问题[修复] Feb 19, 2024 pm 10:48 PM

Windows的输入体验是一个关键的系统服务，负责处理来自各种人机接口设备的用户输入。它在系统启动时自动启动，在后台运行。然而，有时候这个服务可能会出现自动挂起或占用过多内存的情况，导致系统性能下降。因此，及时监控和管理这个进程是至关重要的，以确保系统的效率和稳定性。在这篇文章中，我们将分享如何解决Windows输入体验被挂起或导致内存使用率高的问题。Windows输入体验服务没有用户界面，但它与处理与输入设备相关的基本系统任务和功能有密切关联。它的作用是帮助Windows系统理解用户输入的每一

iOS 17：如何在待机模式下更改iPhone时钟样式 Sep 10, 2023 pm 09:21 PM

待机是一种锁定屏幕模式，当iPhone插入充电器并以水平（或横向）方向定位时激活。它由三个不同的屏幕组成，其中一个是全屏时间显示。继续阅读以了解如何更改时钟的样式。StandBy的第三个屏幕显示各种主题的时间和日期，您可以垂直滑动。某些主题还会显示其他信息，例如温度或下一个闹钟。如果您按住任何时钟，则可以在不同的主题之间切换，包括数字、模拟、世界、太阳能和浮动。Float以可自定义的颜色以大气泡数字显示时间，Solar具有更多标准字体，具有不同颜色的太阳耀斑设计，而World则通过突出显示世界地

JavaScript中生成随机数字和字符串 Sep 02, 2023 am 08:57 AM

生成随机数或字母数字字符串的能力在许多情况下都会派上用场。您可以使用它在游戏中的不同位置生成敌人或食物。您还可以使用它向用户建议随机密码或创建文件名来保存文件。我写了一篇关于如何在PHP中生成随机字母数字字符串的教程。我在这篇文章的开头说，几乎没有事件是真正随机的，同样的情况也适用于随机数或字符串生成。在本教程中，我将向您展示如何在JavaScript中生成伪随机字母数字字符串。在JavaScript中生成随机数让我们从生成随机数开始。我想到的第一个方法是Math.random()，它返回一个浮

C++程序将一个数字四舍五入到n位小数 Sep 12, 2023 pm 05:13 PM

在任何语言中编写程序时，将数字表示为输出是一项有趣且重要的任务。对于整数类型（short、long或medium类型的数据），很容易将数字表示为输出。对于浮点数（float或double类型），有时我们需要将其四舍五入到特定的小数位数。例如，如果我们想将52.24568表示为三位小数，需要进行一些预处理。在本文中，我们将介绍几种技术，通过四舍五入将浮点数表示为特定的小数位数。在不同的方法中，使用类似C的格式化字符串、使用精度参数以及使用数学库中的round()函数是很重要的。让我们逐个来看。带有

使用C++编写代码，找到第N个非平方数 Aug 30, 2023 pm 10:41 PM

我们都知道不是任何数字的平方的数字，如2、3、5、7、8等。非平方数有N个，不可能知道每个数字。因此，在本文中，我们将解释有关无平方数或非平方数的所有内容，以及在C++中查找第N个非平方数的方法。第N个非平方数如果一个数是整数的平方，则该数被称为完全平方数。完全平方数的一些例子是-1issquareof14issquareof29issquareof316issquareof425issquareof5如果一个数不是任何整数的平方，则该数被称为非平方数。例如，前15个非平方数是-2,3,5,6,

Java中的数字（带有0前缀和字符串） Aug 29, 2023 pm 01:45 PM

Java中的数字重要的是要理解数字类不是一个有形的类，而是一个抽象的类。在它内部，我们有一组定义其功能的包装类。这些包装类包括Integer、Byte、Double、Short、Float和Long。您可能会注意到，这些与我们之前讨论的基本数据类型相同，但它们表示为具有大写名称的单独类，以符合类命名约定。根据特定函数或程序范围的要求，编译器自动将原始数据类型转换为对象，反之亦然，并且数字类是java.lang包的一部分。此过程称为自动装箱和拆箱。通过掌握数字类及其对应的包装类的抽象性质，我们可以

找出在范围内不可被任何数整除的数字，使用C++ Sep 13, 2023 pm 09:21 PM

在本文中，我们将讨论查找1到n（给定）之间的数字的问题，这些数字不能被2到10之间的任何数字整除。让我们通过一些例子来理解这一点-Input:num=14Output:3Explanation:Therearethreenumbers,1,11,and13,whicharenotdivisible.Input:num=21Output:5Explanation:Therearefivenumbers1,11,13,17,and19,whicharenotdivisible.求解的方法简单方法如果

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题