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

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

전화기에 숫자 키보드를 강제로 띄우는 방법이 있습니까?<input type="text">HTML5는 "부동점 번호"를 위한 것이므로 신용카드 번호, ZIP 코드 등에는 적합하지 않다는 것을 방금 알았습니다.

는 의숫키보기에능싶뮬다습니고하트이레을의 숫자 키보드 하고 싶습니다.<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]*우리는 모든 곳에서 작동하는 솔루션을 얻습니다. 5 제안 HTML 5. 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-numeric-keypad/

"패스코드와 같은 "패스코드"와 같은 것을 하는 했습니다.<input type="tel" />가장 실제적인 숫자 지향 필드를 생성하게 되며 자동 형식 지정 기능이 없다는 이점도 있습니다.예를 들어, 제가 최근에 힐튼을 위해 개발한 모바일 애플리케이션에서, 저는 결국 다음과 같이 하게 되었습니다.

그리고 제 의뢰인은 매우 감명받았습니다.

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

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

입력 모드를 사용하면 브라우저에 힌트를 줄 수 있습니다.

type="email"또는type="url"적어도 아이폰과 같은 일부 전화기에서 키보드를 제공할 것입니다.전화 번호의 경우 다음을 사용할 수 있습니다.type="tel".

사용하면 위험합니다.<input type="text" pattern="\d*">숫자 키보드를 엽니다. 및 Chrome 서 패 포 정 사 브 저 우 가 유 검 다 니 합 사 성 효 에 의 입 력 대 턴 에 된 함 한 식 규 을 하 용 면 라 식 에 당 ▁will ▁blank ▁or ▁errors ▁left 및 ▁chrome ▁if ▁it ▁pattern ▁firefox ▁occur ▁is 서 에 ▁the 패 에 턴 ▁doesn 포 된 함 식 다패턴과 일치하지 않거나 비워 두면 오류가 발생합니다.다른 브라우저에서 의도하지 않은 작업을 수행합니다.

2020년 현재

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

CSS 트릭은 그것에 대해 정말 좋은 기사를 썼습니다: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

저에게 최고의 솔루션은 다음과 같습니다.

정수 숫자의 경우, 안드로이드와 아이폰에서 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'를 추가합니다.

만약 당신이 실제로 부동 소수점 번호를 원했다면, 당신이 원하는 정밀도로 단계를 밟아 안드로이드에 '.'를 추가할 것입니다.

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

생각합니다type="number"시맨틱 웹 페이지에 가장 적합합니다.키드를변려다사음수있용다습니할을면경보하다,▁▁use있▁you니▁▁the▁can를 사용하면 됩니다.type="number"또는type="tel"두 경우 모두 아이폰은 사용자 입력을 제한하지 않습니다.사용자는 원하는 문자를 계속 입력하거나 붙여넣을 수 있습니다.변경 사항은 사용자에게 표시되는 키보드뿐입니다.이 이상의 제한을 원하는 경우 JavaScript를 사용해야 합니다.

입력 필드에 텍스트 형식을 사용하지만 숫자 키보드를 표시하려는 경우와 같이 이러한 유형의 동작을 수행하는 쉬운 방법이 있습니다.

내 입력:

<input inputMode="numeric" onChange={handleInputChange} />

팁: 이러한 유형의 동작(쉼표로 구분된 숫자)을 수행하려면 다음을 수행합니다.handleInputChange으로 하기 마찬가지입니다.)

2018년:

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

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

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

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

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

게시된 모든 답변은 OP가 질문했던 것이 아닌 숫자만 키보드를 트리거합니다.텍스트 입력에서 type='number' 키보드를 트리거하는 유일한 방법은 CSS와 JS를 사용하는 것입니다.

요령은 CSS를 사용하여 텍스트 입력 위에 겹치는 두 번째 숫자 입력을 만드는 것입니다.

<style type="text/css">
    /* hide number spinners on inputs */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance:textfield; /* Firefox */
    }
    .hidden-number {
        margin-top: -26px;
    }
</style>


<form method="post" action="submit.php">
    <input class="form-control" type="text" name="input_name">
    <input class="form-control hidden-number" type="number" id="input_name">
</form>

JavaScript를 사용하면 숫자 입력이 포커스를 얻으면 원하는 키보드가 트리거됩니다.그런 다음 type='number' 특성을 제거해야 하므로 숫자 이외의 항목을 입력할 수 없습니다.그런 다음 텍스트 입력에 있는 내용을 번호 입력으로 전송합니다.마지막으로, 숫자 입력이 초점을 잃으면 내용을 텍스트 입력으로 다시 전송하고 type='number' 속성을 바꿉니다.

<script type="text/javascript">
    $(".hidden-number").on("focus", function(){
        $(this).removeAttr("type");
        var text_input = $("input[name="+this.id+"]");
        $(this).val(text_input.val());
        text_input.val("");
    });

    $(".hidden-number").on("focusout", function(){
        var text_input = $("input[name="+this.id+"]");
        text_input.val($(this).val());
        $(this).attr("type", "number");
    });
</script>

다음과 같이 시도할 수 있습니다.

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

하지만 조심해야 합니다.입력에 숫자 이외의 내용이 포함되어 있으면 서버로 전송되지 않습니다.

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

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

<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");

    }
});

우리는 이 일을 잘 해결했습니다.

사용해 보십시오.

$(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

언급URL : https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input