전화: 텍스트 입력을 위한 숫자 키보드
전화기에 숫자 키보드를 강제로 띄우는 방법이 있습니까?<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
'programing' 카테고리의 다른 글
SQL Left Join 첫 번째 일치 항목만 (0) | 2023.04.28 |
---|---|
sudo에서 호출한 Bash 스크립트에서 사용자 식별 (0) | 2023.04.28 |
바둑에서 문자열을 효율적으로 연결하는 방법 (0) | 2023.04.28 |
Azure Service Fabric은 Docker와 같은 기능을 합니까? (0) | 2023.04.23 |
Objective-C의 isEqualToString과 동등한 Swift는 무엇입니까? (0) | 2023.04.23 |