왜에 유형을 변경하지 내 입력 크기 조정 때 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">
수정하려면 스타일을 추가하세요.
<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,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”로 변경
