用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,whicharen的解題方法簡單方法如果

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版

熱門話題