Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML의 한 범위 입력에서 다른 단계 속성을 사용하는 방법은 무엇입니까?


HTML 입력 유형 단계 속성은 법적 숫자 간격을 설정합니다. 단계는 0, 2, 4, 6, 8, 10 등과 같은 숫자 단계입니다. 단계 속성은 최대 및 최소 속성과 함께 사용하여 올바른 값 범위를 생성할 수 있습니다.

HTML의 한 범위 입력에서 다른 단계 속성을 사용하려면 JavaScript를 사용합니다. 먼저 step 속성을 사용하는 방법을 알아보겠습니다.

HTML의 한 범위 입력에서 다른 단계 속성을 사용하는 방법은 무엇입니까?

다음 코드를 실행하여 입력 단계 속성으로 숫자 단계를 생성할 수 있습니다. 여기에서는 2단계를 생성하므로 유효한 입력은 2, 4, 6, 8, 10 등이 됩니다. 이외의 숫자를 입력하고 제출 버튼을 누르면 다음 메시지가 표시됩니다. 값". 또한 가장 가까운 두 값을 알려줍니다.

예시

  HTML 입력 단계 속성   
<입력 유형 ="숫자" 이름 ="포인트" 단계 ="2">
<입력 유형 ="제출" 값 ="제출">

우리는 jQuery를 사용하여 HTML의 한 범위 입력에 다른 단계 속성을 제공할 것입니다. 여기에 10과 2의 두 단계를 추가했습니다. 여기의 범위는 min 및 max 속성에서 설정되는 100에서 450 사이입니다.

예시

   <스크립트 유형=" text/javascript"> $(function() { $('#points').on('입력 변경', function() { var 요소 =$('#points'), 값 =element.val(), 단계; // 여기에 규칙 설정 if (value <205) { step =10; }else { step =2; } element.attr('step', step); $('#value').text(value); $ ('#단계').텍스트(단계); }); });    
값:
현재 단계:
<입력 ID="포인트" 유형="범위" 값="100" min="100" max="450" ​​/>