数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法

一个新手

Sep 22, 2017 am 10:07 AM

番号入力

ここでは同じ幅のフォントを使用する必要があります。たとえば、数字の 1 と数字 8 は同じ幅です。ここでは dinpro-regulator.otf が使用されます。

要件: 1. 15 桁の整数の入力を許可します。小数点以下 2 桁
2. 入力ボックスの幅は固定されており、フォントはコンテンツの長さに応じて変化します
3.
で始まる複数のゼロを入力することは禁止されています。 -number エラー処理(空かどうか判定)

<!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>

ログイン後にコピー

以上が数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7503

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Win11 入力エクスペリエンスの無効化ガイド Dec 27, 2023 am 11:07 AM

最近、多くの Win11 ユーザーは、入力エクスペリエンスダイアログボックスが常にちらつき、オフにできないという問題に遭遇しています。これは実際には、Win11 のデフォルトのシステムサービスとコンポーネントが原因です。最初に関連するサービスを無効にしてから、入力体験サービス. 解決しましたので、一緒に試してみましょう。 win11で入力エクスペリエンスをオフにする方法: 最初のステップ, スタートメニューを右クリックして「タスクマネージャー」を開きます. 2番目のステップ, 「CTF Loader」、「MicrosoftIME」、および「Service Host: Textinput Management Service」の3つのプロセスを見つけます順番に、「タスクの終了」を右クリックします。「3番目のステップ、スタートメニューを開き、上部にある「サービス」を検索して開きます。4番目のステップ、その中で「Textinp」を見つけます

Windows 入力でハングまたはメモリ使用量の増加が発生する [修正] Feb 19, 2024 pm 10:48 PM

Windows 入力エクスペリエンスは、さまざまなヒューマンインターフェイスデバイスからのユーザー入力を処理する重要なシステムサービスです。システム起動時に自動的に起動し、バックグラウンドで実行されます。ただし、場合によっては、このサービスが自動的にハングしたり、メモリを過剰に占有したりして、システムのパフォーマンスが低下することがあります。したがって、システムの効率と安定性を確保するには、このプロセスをタイムリーに監視および管理することが重要です。この記事では、Windows の入力エクスペリエンスがハングしたり、メモリ使用量が高くなる問題を修正する方法を紹介します。 Windows 入力エクスペリエンスサービスにはユーザーインターフェイスがありませんが、基本的なシステムタスクと入力デバイスに関連する機能の処理に密接に関連しています。その役割は、Windows システムがユーザーによって入力されたすべての入力を理解できるようにすることです。

iOS 17: スタンバイモードでiPhoneの時計スタイルを変更する方法 Sep 10, 2023 pm 09:21 PM

スタンバイは、iPhone が充電器に接続され、水平 (または横) 向きになっているときにアクティブになるロック画面モードです。これは 3 つの異なる画面で構成されており、そのうちの 1 つは全画面表示されます。時計のスタイルを変更する方法については、この記事を読んでください。 StandBy の 3 番目の画面には、垂直にスワイプできるさまざまなテーマで時刻と日付が表示されます。一部のテーマでは、温度や次のアラームなどの追加情報も表示されます。時計を押し続けると、デジタル、アナログ、ワールド、ソーラー、フローティングなどのさまざまなテーマを切り替えることができます。 Float はカスタマイズ可能な色の大きなバブル数字で時間を表示します。Solar はさまざまな色の太陽フレアのデザインを備えたより標準的なフォントを持ち、World は世界を強調表示して表示します。

JavaScript で乱数と文字列を生成する Sep 02, 2023 am 08:57 AM

乱数や英数字の文字列を生成する機能は、多くの状況で役立ちます。これを使用して、ゲーム内のさまざまな場所に敵や食べ物をスポーンできます。これを使用して、ユーザーにランダムなパスワードを提案したり、ファイルを保存するためのファイル名を作成したりすることもできます。 PHP でランダムな英数字文字列を生成する方法に関するチュートリアルを書きました。この投稿の冒頭で、真にランダムなイベントはほとんどないと述べましたが、乱数や文字列の生成にも同じことが当てはまります。このチュートリアルでは、JavaScript で擬似ランダムな英数字文字列を生成する方法を説明します。 JavaScript での乱数の生成まずは乱数を生成してみましょう。最初に思い浮かぶメソッドは Math.random() です。これは浮動小数点を返します。

数値を小数点以下 n 桁に四捨五入する C++ プログラム Sep 12, 2023 pm 05:13 PM

数値を出力として表現することは、どの言語でプログラムを作成する場合でも興味深い、重要な作業です。整数型 (short、long、または Medium 型のデータ) の場合、出力として数値を表すのは簡単です。浮動小数点数 (float または double 型) の場合、特定の小数点以下の桁数に四捨五入する必要がある場合があります。たとえば、52.24568 を小数点以下 3 桁で表現したい場合は、前処理が必要です。この記事では、浮動小数点数を四捨五入して特定の小数点以下の桁数に表現するいくつかのテクニックを紹介します。さまざまなアプローチの中でも、C に似たフォーマット文字列を使用すること、precision 引数を使用すること、および数学ライブラリのround() 関数を使用することが重要です。一つずつ見ていきましょう。と

C++ を使用して N 番目の非平方数を見つけるコードを作成する Aug 30, 2023 pm 10:41 PM

私たちは皆、2、3、5、7、8 など、数の 2 乗ではない数字を知っています。非正方形の数は N 個あり、すべての数を知ることは不可能です。そこで、この記事では、平方なしまたは非平方数と、C++ で N 番目の非平方数を見つける方法についてすべて説明します。 N 番目の非平方数数値が整数の 2 乗である場合、その数値は完全平方と呼ばれます。完全平方数の例としては、-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

この記事では、2 から 10 までのどの数値でも割り切れない 1 から n (指定された) までの数値を見つける問題について説明します。いくつかの例でこれを理解しましょう - 入力:num=14出力:3説明:Therearethreenumbers,1,11,and13,thatarenotdivisible.Input:num=21Output:5説明:Therearefivenumbers1,11,13,17,and19,thatarenotdivisible. 解決済みシンプルなメソッド if

See all articles

数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック