입력 유형 "숫자"는 크기가 조정되지 않습니다.

왜에 유형을 변경하지 내 입력 크기 조정 때 type="number"그러나 그것은 작동 type="text"?

예

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

input유형 number이 size속성을 지원하지 않거나 브라우저에서 호환 되지 않는 것처럼 보입니다 . 대신 CSS를 통해 설정할 수 있습니다.

input[type=number]{
    width: 80px;
} 

업데이트 된 바이올린

잘못된 사용법.

위아래 화살표를 통해 값을 선택할 수 있도록 만든 유형 번호를 입력합니다.

그래서 기본적으로 "너비"CSS 스타일을 찾고 있습니다.

입력 텍스트는 역사적으로 고정 폭 글꼴로 서식이 지정되었으므로 크기도 차지하는 너비입니다.

입력 번호는 새롭고 "크기"속성은 전혀 의미가 없습니다 *. 일반적인 사용법 :

<input type="number" name="quantity" min="1" max="5">

w3c 문서

수정하려면 스타일을 추가하세요.

<input type="number" name="email" style="width: 7em">

편집 : 당신이 범위를 원한다면, 당신은 설정해야 type="range"하지="number"

EDIT2 : * size는 허용 된 값이 아닙니다 (따라서 의미 없음). 공식 W3C 사양 확인

참고 : 크기 속성은 텍스트, 검색, 전화, URL, 이메일 및 비밀번호와 같은 입력 유형에서 작동합니다.

팁 : 요소에 허용되는 최대 문자 수를 지정하려면 maxlength 속성을 사용하십시오.

길이를 설정하는 대신 숫자 입력에 대한 최대 값과 최소값을 설정하십시오.

그런 다음 입력 상자의 크기가 유효한 가장 긴 값에 맞게 조정됩니다.

3 자리 숫자를 허용하려면 999를 최대

 <input type="number" name="quantity" min="0" max="999">

의 경우 <input type=number>HTML5 CR에 의해 size속성이 허용되지 않습니다. 그러나 Obsolete 기능 에서는 다음과 같이 말합니다.“저자는이 사양의 다른 부분과 반대되는 요구 사항에도 불구하고 유형 속성이 Number 상태 인 입력 요소에 maxlength 및 size 속성을 지정해서는 안됩니다. 이러한 속성을 사용하는 한 가지 유효한 이유는 type = "number"인 입력 요소를 지원하지 않는 레거시 사용자 에이전트가 여전히 유용한 너비로 텍스트 필드를 렌더링하도록 돕기 위해서입니다. "

따라서 size속성을 사용할 수 있지만을 지원하지 않는 이전 브라우저에만 영향을 미치므로 type=number요소가 단순한 텍스트 컨트롤 인 <input type=text>.

이것의 근거는 브라우저가 좋은 사용성을 위해 다른 속성을 고려하는 사용자 인터페이스를 제공 할 것으로 예상된다는 것입니다. 구현이 다를 수 있으므로 작성자가 지정한 크기는 문제를 일으킬 수 있습니다. (이것은 CSS에서 컨트롤의 너비를 설정하는 경우에도 적용됩니다.)

결론은 <input type=number>요소의 치수에 대해 어떠한 가정도하지 않는 다소 유동적 인 설정에서 사용해야한다는 것 입니다.

당신이 원하는 것은 maxlength.

적용 대상 text, search, url,tel , email,과 password, 사용자가 필드에 입력 할 수 있습니다 (UTF-16 코드 단위로) 문자의 최대 수를 정의합니다. 정수 값 0 이상이어야합니다. maxlength가 지정되지 않았거나 유효하지 않은 값이 지정되면 필드에 최대 길이가 없습니다. 이 값은 minlength 값보다 크거나 같아야합니다.

이러한 input유형 중 하나를 사용하는 것이 좋습니다.

onkeypress 이벤트를 사용하십시오. 우편 번호 상자의 예. 최대 5 개의 문자를 허용하고 입력이 숫자로만되어 있는지 확인합니다.

물론 서버 측 유효성 검사를 능가하는 것은 없지만 이것은 훌륭한 방법입니다.

function validInput(e) {
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) {
    return false;
  } else if (a.value.length >= 5) {
    return false;
  }

  return true;
}

#zip-code {
  overflow: hidden;
  width: 60px;
}

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

type = "number"를 type = "tel"로 변경