HTML5 입력 유형 = "숫자"대시 허용

HTML 양식에 숫자 입력 유형을 사용하고 싶습니다.HTML5 입력 유형 = "숫자"대시 허용

불행히도 실수 사이에는 대시가 허용되지 않습니다.

"1234-123456789"와 같은 숫자 입력을 허용하는 방법이 있습니까?

2015-01-20 alexwenzel

'number'입력 값은 항상 유효한 부동 소수점 수이어야하며 그 때문에 숫자 앞에 하나의 대시 (즉, 빼기 부호) 만 포함될 수 있습니다. http://www.w3.org/TR/html5/infrastructure.html#valid-floating-point-number – icke

값의 유효성을 검사하는 정규식을 사용할 수 있습니다. 단순히 pattern 속성에 넣으십시오. 또한이를 사용하려면 입력의 type을 text으로 변경해야합니다.

<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num" 
       title="The number input must start with a number and use either dash or a comma."/>

출처

2015-01-20 11:23:50

을 참조하십시오. 이미 시도했습니다. 그런데 휴대 기기에서 멋진 숫자 키보드가 느슨합니다. – alexwenzel

@alexwenzel 코드로 질문을 업데이트하십시오. –

최근에 같은 문제가있었습니다. 나는 type = "text"또는 type = "number"대신에 type = "tel"를 사용하여 주위를 둘러 보았습니다. 'tel'를 사용하여 모바일 장치에서 숫자로만 키보드를 가져올 수 있었지만 여전히 내 패턴 = "[0-9 \ -] +"을 사용할 수있었습니다.

다음은 내가 사용한 코드입니다. 나는 이것이 당신이 필요로하는 것에 충분하기를 바란다. 패턴 애트리뷰트를 추가하면 type 애트리뷰트에 설정된 패턴을 오버라이드 (override) 할 필요가있다.

<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>

당연히 이것은 원하는 모든 것이 대시이고 가능한 경우 괄호이면 작동합니다.

출처

2015-08-09 00:47:08 metamilo

접근성에 문제가 있습니까? 스크린 리더가 사람들에게 전화 번호를 입력하라고 말합니까? – Carlin

@ 캐린 : 좋은 지적입니다. 화면 판독기에 문제가 발생할 수 있습니다. 그렇기 때문에 완벽한 해결책은 아니지만 그것이 받아 들일만한 희생인지 여부는 개발자의 몫입니다. – metamilo

고마워요, 영리한 작은 해킹. 참고 : 이것은 또한 숫자 입력에 허용되지 않는 '/'문자를 허용하는 것으로 보입니다. 이것을 사용하여 휴대 전화 번호 키패드를 사용하는 날짜 입력을 가져옵니다. –

HTML5 입력 유형 = "숫자"대시 허용

답변

관련 문제