전화 : 텍스트 입력을위한 숫자 키보드

전화 번호 키보드를 강제로 켜는 방법이 <input type="text">있습니까? 방금 <input type="number">HTML5에서 "부동 소수점 숫자" 임을 알았 으므로 신용 카드 번호, 우편 번호 등에 적합하지 않습니다.

<input type="number">부동 소수점 숫자 이외의 숫자 값을 사용하는 입력에 대해의 숫자 키보드 기능을 에뮬레이션하고 싶습니다 . 아마도 다른 적절한 input유형이 있습니까?

할 수 있습니다 <input type="text" pattern="\d*">. 숫자 키보드가 나타납니다.

자세한 내용은 여기를 참조하십시오 : iOS 용 텍스트, 웹 및 편집 프로그래밍 안내서

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

2015 년 중반까지 이것이 최선의 해결책이라고 생각합니다.

<input type="number" pattern="[0-9]*" inputmode="numeric">

그러면 Android와 iOS 모두에서 숫자 키패드가 제공됩니다.

또한 위 / 아래 화살표 버튼과 키보드 친화적 인 위 / 아래 화살표 키를 사용하여 예상되는 데스크탑 동작을 제공합니다.

이 코드 스 니펫에서 사용해보십시오.

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

둘을 결합하여 type="number"하고 pattern="[0-9]*, 우리는 모든 곳에서 작동하는 솔루션을 얻을. 또한 향후 HTML 5.1 제안 inputmode속성 과 호환됩니다 .

참고 : 패턴을 사용하면 브라우저의 기본 양식 유효성 검사가 트리거됩니다. novalidate속성을 사용하여이를 비활성화 하거나 title속성을 사용하여 유효성 검사 실패에 대한 오류 메시지를 사용자 정의 할 수 있습니다 .

국제 우편 번호와 같이 선행 0, 쉼표 또는 문자를 입력해야하는 경우이 약간의 변형을 확인하십시오 .

학점 및 추가 자료 :

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- 숫자 키패드 /

적어도 "패스 코드"와 같은 필드의 <input type="tel" />경우 가장 확실한 숫자 지향 필드를 생성 하는 것과 같은 작업을 수행 하며 자동 서식 이 없다는 이점도 있습니다. 예를 들어, 최근 힐튼을 위해 개발 한 모바일 응용 프로그램에서 다음과 같은 결과를 얻었습니다.

... 내 고객은 매우 감동했습니다.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

를 사용 type="email"하거나 type="url"당신에게 같은 아이폰과 같은 적어도 일부 휴대 전화에 키보드를 줄 것이다. 전화 번호의 경우을 사용할 수 있습니다 type="tel".

를 사용 <input type="text" pattern="\d*">하여 숫자 키보드를 표시 하면 위험 할 수 있습니다. 파이어 폭스와 크롬에서 패턴에 포함 된 정규 표현식은 브라우저가 해당 표현식에 대한 입력의 유효성을 검사하도록합니다. 패턴과 일치하지 않거나 비워두면 오류가 발생합니다. 다른 브라우저에서 의도하지 않은 동작에주의하십시오.

<input type="text" inputmode="numeric">

로 INPUTMODE 는 브라우저에 대한 힌트를 제공 할 수 있습니다.

type="number"시맨틱 웹 페이지에 가장 적합 하다고 생각 합니다. 키보드 만 변경하려면 type="number"또는 을 사용할 수 있습니다 type="tel". 두 경우 모두 iPhone은 사용자 입력을 제한하지 않습니다. 사용자는 원하는 문자를 입력하거나 붙여 넣을 수 있습니다. 유일한 변경 사항은 사용자에게 표시되는 키보드입니다. 이 이상의 제한을 원하면 JavaScript를 사용해야합니다.

나에게 가장 좋은 해결책은 다음과 같습니다.

안드로이드와 아이폰에 0-9 패드를 띄우는 정수

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

파이어 폭스 / 크롬 / 사파리에서 스피너를 숨기려면이 작업을 원할 수도 있습니다. 대부분의 고객은 추악하다고 생각합니다.

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

사용자 정의 유효성 검사를 수행하는 경우 양식 요소에 novalidate = 'novalidate'를 추가하십시오.

Ps 당신이 실제로 부동 소수점 숫자를 원할 경우를 대비하여, 당신이 좋아하는 정밀도로 밟으면 '.' 안드로이드

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

2018 년 :

<input type="number" pattern="\d*">

Android 및 iOS 모두에서 작동합니다.

Android (^ 4.2) 및 iOS (11.3)에서 테스트했습니다.

다음과 같이 시도해보십시오.

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

그러나주의 사항 : 입력에 숫자 이외의 것이 포함되어 있으면 서버로 전송되지 않습니다.

모든 상황에서 나에게 가장 적합한 유형을 찾을 수 없습니다. 숫자 입력 (예 : "7.5"입력)을 기본값으로 설정해야하지만 특정 시간에는 텍스트 (예 : "pass")도 허용해야합니다. 사용자는 숫자 키패드 (예 : 7.5 입력)를 원했지만 가끔 텍스트를 입력해야했습니다 (예 : "통과").

오히려 내가 한 것은 양식에 확인란을 추가하고 사용자가 type = "number"와 type = "text"사이에서 내 입력 (id = "inputSresult")을 전환하도록 허용하는 것이 었습니다.

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

그런 다음 위의 확인란을 선택했는지 여부에 따라 텍스트와 숫자 사이에서 유형을 전환하는 클릭 핸들러를 확인란에 연결했습니다.

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

이것은 우리에게 잘 작동했습니다.

 <input type="text" inputmode="decimal">

숫자 키패드를 사용하여 텍스트를 입력합니다.

inputmodehtml 속성을 사용할 수 있습니다 :

<input type="text" inputmode="numeric" />

자세한 내용 은 inputmode 에서 MDN 문서를 확인하십시오 .

이 시도:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

참조 : https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask