숫자 입력창을 이용하여 입력 자릿수를 제한하는 방법과 숫자 길이에 따라 글꼴이 변경되는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

숫자 입력창을 이용하여 입력 자릿수를 제한하는 방법과 숫자 길이에 따라 글꼴이 변경되는 방법

一个新手

Sep 22, 2017 am 10:07 AM

숫자 입력하다

여기서는 너비가 같은 글꼴을 사용해야 합니다. 예를 들어 숫자 1과 숫자 8은 너비가 동일합니다. 여기서는 dinpro-regular.otf를 사용합니다.

요구사항:
1. 소수점 두 개
2. 입력 상자 너비는 고정되어 있으며 내용의 길이에 따라 글꼴이 변경됩니다
3.
ps로 시작하는 0을 여러 개 입력하는 것은 금지됩니다. 위의 전제는 사용자가 숫자를 입력한다는 것입니다. -숫자 오류 처리(비어 있는지 확인)

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7486

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Win11 입력 경험 가이드 비활성화 Dec 27, 2023 am 11:07 AM

최근 많은 Win11 사용자가 입력 환경 대화 상자가 항상 깜박이고 끌 수 없는 문제에 직면했습니다. 이는 실제로 Win11의 기본 시스템 서비스 및 구성 요소로 인해 발생합니다. 먼저 관련 서비스를 비활성화한 다음 비활성화해야 합니다. 입력 경험 서비스, 해결해 볼까요? win11에서 입력 환경을 끄는 방법: 첫 번째 단계에서는 시작 메뉴를 마우스 오른쪽 버튼으로 클릭하고 "작업 관리자"를 엽니다. 두 번째 단계에서는 "CTF 로더", "MicrosoftIME" 및 "서비스 호스트: Textinput Management Service" 세 가지 프로세스를 찾습니다. 순서대로 "작업 끝내기"를 마우스 오른쪽 버튼으로 클릭합니다. "세 번째 단계는 시작 메뉴를 열고 상단의 "서비스"를 검색하여 엽니다. 네 번째 단계에서는 "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()입니다.

숫자를 소수점 이하 n자리로 반올림하는 C++ 프로그램 Sep 12, 2023 pm 05:13 PM

숫자를 출력으로 표현하는 것은 어떤 언어로든 프로그램을 작성할 때 흥미롭고 중요한 작업입니다. 정수 유형(짧은, 긴 또는 중간 유형의 데이터)의 경우 숫자를 출력으로 표현하는 것이 쉽습니다. 부동 소수점 숫자(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의 숫자 Number 클래스는 유형 클래스가 아니라 추상 클래스라는 점을 이해하는 것이 중요합니다. 그 안에는 기능을 정의하는 래퍼 클래스 세트가 있습니다. 이러한 래퍼 클래스에는 Integer, Byte, Double, Short, Float 및 Long이 포함됩니다. 이는 앞서 논의한 것과 동일한 기본 데이터 유형이지만 클래스 명명 규칙을 따르기 위해 대문자 이름을 사용하여 별도의 클래스로 표시됩니다. 컴파일러는 특정 기능이나 프로그램 범위에 필요한 대로 기본 데이터 유형을 객체로 또는 그 반대로 자동으로 변환하며 숫자 클래스는 java.lang 패키지의 일부입니다. 이 프로세스를 오토박싱 및 언박싱이라고 합니다. 숫자 클래스와 그에 상응하는 래퍼 클래스의 추상적 성격을 파악함으로써 다음을 수행할 수 있습니다.

C++를 사용하여 범위 내 어떤 숫자로도 나누어지지 않는 숫자 찾기 Sep 13, 2023 pm 09:21 PM

이 글에서는 2와 10 사이의 어떤 숫자로도 나누어지지 않는 1과 n 사이의 숫자(주어진 숫자)를 찾는 문제에 대해 논의할 것입니다. 몇 가지 예를 통해 이를 이해해 보겠습니다. 입력:num=14Output:3Explanation:나누 수 없는 세 개의 숫자 1,11,13이 있습니다.Input:num=21Output:5Explanation:나누 수 없는 다섯 개의 숫자 1,11,13,17,19가 있습니다. 해결된 경우 간단한 방법입니다.

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 버전

뜨거운 주제