정수만 사용하는 숫자 입력 유형?
저는 jQuery를 통해 HTML5 검증을 구현하는 jQuery Tools Validator를 사용하고 있습니다.
한 가지를 제외하고는 지금까지 잘 작동하고 있습니다.HTML5 사양에서 입력 유형은"number"정수와 부동 소수점 숫자를 모두 가질 수 있습니다.
번호가 에 이는 믿을 수 없을 인 것으로 . (부호되지 않은 데터베필부소번동서수유경드호검점이용명한우될보가것다근니입로으적안시정로없도수을믿이때기을은것에이이스문에가기증된에만▁this▁to▁incred▁'for▁backator▁fields▁seems▁(보다▁uns▁it니▁fall▁to입▁since▁have-sighted로으▁numbers▁int▁are-▁will▁youll▁your▁a▁valid▁useful▁database▁beigned▁floatingpoint▁shortpattern유효성 검사를 수행하므로 이를 지원하는 브라우저의 위쪽 및 아래쪽 화살표와 같은 추가 기능이 손실됩니다.
입력을 부호 없는 정수로만 제한하는 다른 입력 유형 또는 속성이 있습니까?
나는 아무것도 찾을 수 없었어요.
스텝을 1로 설정하는 것은 입력을 제한하지 않기 때문에 정답이 아닙니다.텍스트 상자에 음수 부동 소수점 번호를 입력할 수도 있습니다.
또한 패턴 검증에 대해서도 알고 있습니다(원래 게시물에서 언급했습니다). 하지만 그것은 질문의 일부가 아니었습니다.
저는 HTML5가 "숫자" 유형의 입력을 양의 정수 값으로 제한하는 것을 허용하는지 알고 싶었습니다.이 질문에 대한 대답은 "아니오, 그렇지 않습니다."일 것입니다.
jQuery Tools 유효성 검사를 사용할 때 이로 인해 몇 가지 단점이 발생하기 때문에 패턴 유효성 검사를 사용하고 싶지 않았지만, 이제는 사양상 더 깨끗한 방법을 사용할 수 없는 것 같습니다.
HTML로만 가능한 최상의 성능(문서):
<input type="number" min="0" step="1"/>을 합니다.step 다리탓으에 대한 .1:
<input type="number" step="1" />이것은 지금 Chrome에서 약간 버그가 있는 것 같아서 현재로서는 최선의 해결책이 아닐 수 있습니다.
더 나은 해결책은 다음을 사용하는 것입니다.pattern입력과 일치하는 정규식을 사용하는 속성:
<input type="text" pattern="\d*" />\d인 숫에대정입니다규식한자다▁the니▁is,▁aion▁for▁express입니다.*둘 이상을 수락한다는 의미입니다.
JavaScript를 쉽게 사용할 수 있는 방법:
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
<input type="text" name="PhoneNumber" pattern="[0-9]{10}" title="Phone number">
이 코드를 사용하면 텍스트 필드에 대한 입력이 숫자만 입력하도록 제한됩니다.패턴은 HTML 5에서 사용할 수 있는 새로운 속성입니다.
패턴은 좋지만 입력을 type="text"로만 제한하려면 아래와 같이 on input과 regex를 사용할 수 있습니다.
<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
나는 나를 위해 일합니다 :)
<input type="number" oninput="this.value = Math.round(this.value);"/>이것은 HTML5에만 해당하는 것이 아닙니다. 이것은 모든 브라우저에서 잘 작동합니다.사용해 보십시오.
document.getElementById("input").addEventListener("keyup", function() {
this.value = this.value.replace(/[^0-9]/g, "");
});<input id="input" type="text">은 항상됩니다. 패턴을 사용해 보십시오. 시도해 보십시오.oninput그리고.min부터 1까지의 할 경우 1이 합니다.
<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
value=${var} >
최단 거리
<input type="number" oninput="this.value|=0"/>" 연산자에 대한 표준 를 들어 "OR" 연산자는 "OR" 연산자입니다. 예:9 | 2 = 11 이수진:0b1001 | 0b1010 = 0b1011이 연산자는 먼저 암묵적인 방식으로 정수에 숫자를 캐스팅한 다음 OR을 수행합니다.그러나 0이 있는 OR은 아무것도 변경하지 않기 때문에 숫자는 정수로 캐스팅됩니다.숫자가 아닌 문자열이 있는 OR은 0을 제공합니다.
: 입필입만하면됩니다기력하에드력.onkeypress='return event.charCode >= 48 && event.charCode <= 57'
이것은 오래된 질문이지만 액세스 가능한 버전(현재 대부분의 브라우저에서 지원됨)은 다음과 같습니다.
<input type="text" inputmode="numeric" pattern="[0-9]*">
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ 을 참조하십시오.
저는 oh Chrome에서 일하다가 html 속성을 사용하는데도 문제가 좀 있었습니다.나는 결국 이 JS 코드로 끝났습니다.
$("#element").on("input", function(){
var value = $(this).val();
$(this).val("");
$(this).val(parseInt(value));
return true;
});
트step예를 들어 0.01과 같은 임의의 플로트 번호에 대한 속성을 지정할 수 있습니다.
설정해 보셨습니까?step와 같이 을 부여합니다.
<input type="number" step="1" />
모든 사용 사례에 맞는 것은 아닐 수 있지만,
<input type="range" min="0" max="10" />
잘 할 수 있습니다: fiddle.
설명서를 확인하십시오.
예, HTML5는 그렇습니다.다음 코드를 사용합니다(w3chool).
<!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(작동하지 않음)를 사용해 보았습니다.
트step="any"잘 작동합니다.참조: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
현재 사용자가 HTML로만 입력에 십진수 값을 쓰는 것을 방지할 수 없습니다.당신은 자바스크립트를 사용해야 합니다.
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);
}
});
step="any"의 부동 소수점 를 지정합니다.
요소 값의 값 세분성을 지정합니다.
그래서 간단하게 설정할 수 있습니다.1:
나중에 필요한 사람이 있다면 게시하는 것.
const negativeValuePrevent = (e) => {
const charCode = e.which ? e.which : e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)
&& charCode !== 46){
if(charCode < 96 || charCode > 105){
e.preventDefault();
return false;
}
}
return true;
};
정수 입력은 양수, 0 및 음수만 사용할 수 있음을 의미합니다.이것이 제가 자바스크립트 키프레스를 사용하여 이것을 성취할 수 있었던 방법입니다.
<input type="number" (keypress)="keypress($event, $event.target.value)" >
keypress(evt, value){
if (evt.charCode >= 48 && evt.charCode <= 57 || (value=="" && evt.charCode == 45))
{
return true;
}
return false;
}
지정된 코드는 사용자가 런타임에 양의 정수 값과 음의 정수 값만 입력하도록 허용하지 않습니다.
짧고 사용하기 편리함
이 솔루션은 직관적인 방식으로 탭, 백스페이스, 엔터, 마이너스를 지원합니다.
<input type=text onkeypress="return /^-?[0-9]*$/.test(this.value+event.key)">그러나 이미 입력한 숫자를 마이너스로 변경할 수 없으며 복사 가능한 경우를 처리할 수 없습니다.
대안으로 R을 기반으로 한 솔루션을 사용할 수 있습니다. 마이너스를 넣고 복사 붙여넣기 케이스를 처리할 수 있는 야그후비 답변이지만 사용자가 금지 문자를 입력하면 정수를 삭제합니다.
<input type=text oninput="this.value= ['','-'].includes(this.value) ? this.value : this.value|0">참고: 위의 인라인 솔루션은 소규모 프로젝트에서만 사용됩니다.다른 경우에는 함수에서 불투명하게 하고 js 파일로 이동합니다.
미래™(사용할 수 있나요 참조)에서 키보드를 제공하는 사용자 에이전트에서 텍스트 입력을 다음과 같은 숫자로만 제한할 수 있습니다.input[inputmode].
언급URL : https://stackoverflow.com/questions/8808590/number-input-type-that-takes-only-integers
'sourcetip' 카테고리의 다른 글
| 패턴 유형을 설정했는데 EP Plus에서 "패턴 유형이 설정되지 않으면 색상을 설정할 수 없습니다"라고 표시되는 이유는 무엇입니까? (0) | 2023.05.13 |
|---|---|
| ClickOnce 응용 프로그램의 폴더 경로를 가져오는 방법 (0) | 2023.05.13 |
| 유형 오류: re.findall()의 바이트와 같은 개체에 문자열 패턴을 사용할 수 없습니다. (0) | 2023.05.13 |
| 생성자가 매개 변수를 필요로 하는 제네릭 형식의 인스턴스를 생성하시겠습니까? (0) | 2023.05.13 |
| '--set-upstream'은 무엇을 합니까? (0) | 2023.05.13 |