HTML5 : 정수만을 취 번호 입력 형?

해결법

1.당신이 HTML 전용 (문서)를 달성 할 수있는 최선 :

당신이 HTML 전용 (문서)를 달성 할 수있는 최선 :
2.1 단계의 속성을 설정합니다 :

1 단계의 속성을 설정합니다 :
```
<input type="number" step="1" />
```
이 순간에 최고의 솔루션을하지 않을 수 있도록이 지금 크롬에서 약간의 버그를 보인다.

더 나은 솔루션은 입력과 일치하는 정규 표현식을 사용하는 패턴 속성을 사용하는 것입니다 :
```
<input type="text" pattern="\d*" />
```
\ D는 더 중 하나 이상 허용하는지 * 의미 번호의 일반 식이다. 여기 데모입니다 http://jsfiddle.net/b8NrE/1/
3.
```
<input type="text" name="PhoneNumber" pattern="[0-9]{10}" title="Phone number">
```
이 코드를 사용하여 텍스트 필드의 한계에 대한 입력은 숫자 만 입력합니다. 패턴은 HTML 5에서 사용할 수있는 새로운 속성입니다.

패턴 속성 문서

4.자바 스크립트를 사용하는 쉬운 방법 :

자바 스크립트를 사용하는 쉬운 방법 :

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

5.패턴은 좋은 그러나 당신이 유일한 유형 = "텍스트"와 숫자의 입력, 당신은 oninput 사용할 수 있으며 아래와 같이 정규식을 제한하려는 경우 :

패턴은 좋은 그러나 당신이 유일한 유형 = "텍스트"와 숫자의 입력, 당신은 oninput 사용할 수 있으며 아래와 같이 정규식을 제한하려는 경우 :
```
<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
```
나를 위해 내가 warks :)
6.이것은 HTML5에 대한 모든 브라우저에서 잘 작동한다뿐만 아니라. 이 시도

이것은 HTML5에 대한 모든 브라우저에서 잘 작동한다뿐만 아니라. 이 시도
```
onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
```
7.패턴은 항상 제한에 대한 바람직하고, oninput 시도하고 이후 1에서 숫자 만 입력하는 일 발생 분

패턴은 항상 제한에 대한 바람직하고, oninput 시도하고 이후 1에서 숫자 만 입력하는 일 발생 분
```
<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
```
8.그냥 입력 필드에 넣어 : 때 onKeyPress = '반환 event.charCode> = 48 && event.charCode <= 57'

그냥 입력 필드에 넣어 : 때 onKeyPress = '반환 event.charCode> = 48 && event.charCode <= 57'
9.이 같은 1 단계의 속성을 설정 시도

이 같은 1 단계의 속성을 설정 시도
```
<input type="number" step="1" /> 
```
10.
11.아마 모든 사용 사례에 적합하지 않지만,

아마 모든 사용 사례에 적합하지 않지만,
```
<input type="range" min="0" max="10" />
```
정밀한 작업을 수행 할 수 있습니다 바이올린.

설명서를 참조하십시오.
12.예, HTML5는 않습니다. 이 코드 (w3school)를보십시오 :

예, HTML5는 않습니다. 이 코드 (w3school)를보십시오 :
```
<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>
```
최소 및 최대 매개 변수를 참조하십시오? 내가 크롬 19 (일)와 파이어 폭스 (12)를 사용하여 그것을 시도 (작동하지 않았다).
13.나는 HTML 속성을 사용하더라도, 오 크롬 작업과 몇 가지 문제가 있었다. 나는이 JS 코드로 끝났다

나는 HTML 속성을 사용하더라도, 오 크롬 작업과 몇 가지 문제가 있었다. 나는이 JS 코드로 끝났다
```
$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
```
14.설정 단계 = "모든". 벌금을 작동합니다. 참조 : HTTP : //blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

설정 단계 = "모든". 벌금을 작동합니다. 참조 : HTTP : //blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
15.모든 float 번호, 예를 들어 단계로 설정 속성 0.01 당신은 갈 수 있습니다.

모든 float 번호, 예를 들어 단계로 설정 속성 0.01 당신은 갈 수 있습니다.
16.사양에서

사양에서

당신은 단순히 1로 설정할 수 있도록 :

17.

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

18.현재, 단지 HTML과의 입력에 소수점 값을 쓰는 사용자를 방지 할 수 없습니다. 당신은 자바 스크립트를 사용해야합니다.

현재, 단지 HTML과의 입력에 소수점 값을 쓰는 사용자를 방지 할 수 없습니다. 당신은 자바 스크립트를 사용해야합니다.
19.이것은 R. Yaghoobi 응답의 크기 개선

이것은 R. Yaghoobi 응답의 크기 개선
20.이 솔루션 지원 탭, 백 스페이스, 마이너스 직관적 인 방식으로 입력

이 솔루션 지원 탭, 백 스페이스, 마이너스 직관적 인 방식으로 입력

그러나 그것은 마이너스에 이미 입력 된 번호를 변경하고 복사 - 붙여 넣기 사건을 처리 할 수 없습니다.

다른 방법으로는 마이너스와 핸들 복사 - 붙여 넣기 케이스 넣을 수 R. Yaghoobi의 답변에 따라 솔루션을 사용할 수 있지만, 사용자 유형이 문자를 금지 전체 번호를 삭제
21.미래 ™에서 당신에게 키보드를 제시 사용자 에이전트에, (CAN I 사용 참조), 당신은 입력 [INPUTMODE]와 단지 숫자에 텍스트 입력을 제한 할 수 있습니다.

미래 ™에서 당신에게 키보드를 제시 사용자 에이전트에, (CAN I 사용 참조), 당신은 입력 [INPUTMODE]와 단지 숫자에 텍스트 입력을 제한 할 수 있습니다.

from https://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 UI 자동 완성 검색 구성을 위젯 (0)	2020.10.25
[JQUERY] 어떻게 jQuery를 사용하여 여러 선택 상자의 값을 얻으려면? (0)	2020.10.25
[JQUERY] jQuery를 표 행 및 열 번호 (0)	2020.10.25
[JQUERY] 어떻게! ~ (안되지 물결 / 플레이 플레이 물결표)는 '포함 / 포함'배열 메서드 호출의 결과를 변경? (0)	2020.10.25
[JQUERY] 내가 jQuery의 클릭 () 나는 바인딩과에 이벤트 처리기를 바인딩 이미 클릭하지 않은 경우 <A> 링크를 따라하기를 호출 할 수 있습니까? (0)	2020.10.25

복붙노트

[JQUERY] HTML5 : 정수만을 취 번호 입력 형?

HTML5 : 정수만을 취 번호 입력 형?

해결법

1.당신이 HTML 전용 (문서)를 달성 할 수있는 최선 :

2.1 단계의 속성을 설정합니다 :

3.

4.자바 스크립트를 사용하는 쉬운 방법 :

5.패턴은 좋은 그러나 당신이 유일한 유형 = "텍스트"와 숫자의 입력, 당신은 oninput 사용할 수 있으며 아래와 같이 정규식을 제한하려는 경우 :

6.이것은 HTML5에 대한 모든 브라우저에서 잘 작동한다뿐만 아니라. 이 시도

7.패턴은 항상 제한에 대한 바람직하고, oninput 시도하고 이후 1에서 숫자 만 입력하는 일 발생 분

8.그냥 입력 필드에 넣어 : 때 onKeyPress = '반환 event.charCode> = 48 && event.charCode <= 57'

9.이 같은 1 단계의 속성을 설정 시도

10.

11.아마 모든 사용 사례에 적합하지 않지만,

12.예, HTML5는 않습니다. 이 코드 (w3school)를보십시오 :

13.나는 HTML 속성을 사용하더라도, 오 크롬 작업과 몇 가지 문제가 있었다. 나는이 JS 코드로 끝났다

14.설정 단계 = "모든". 벌금을 작동합니다. 참조 : HTTP : //blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

15.모든 float 번호, 예를 들어 단계로 설정 속성 0.01 당신은 갈 수 있습니다.

16.사양에서

17.

18.현재, 단지 HTML과의 입력에 소수점 값을 쓰는 사용자를 방지 할 수 없습니다. 당신은 자바 스크립트를 사용해야합니다.

19.이것은 R. Yaghoobi 응답의 크기 개선

20.이 솔루션 지원 탭, 백 스페이스, 마이너스 직관적 인 방식으로 입력

21.미래 ™에서 당신에게 키보드를 제시 사용자 에이전트에, (CAN I 사용 참조), 당신은 입력 [INPUTMODE]와 단지 숫자에 텍스트 입력을 제한 할 수 있습니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바