위해 <input type="number">
요소 maxlength
작동하지 않습니다. maxlength
해당 숫자 요소 의 를 어떻게 제한 할 수 있습니까?
위해 <input type="number">
요소 maxlength
작동하지 않습니다. maxlength
해당 숫자 요소 의 를 어떻게 제한 할 수 있습니까?
답변:
그리고 당신은 max
당신이 삽입 할 수있는 가장 높은 숫자를 지정 하는 속성을 추가 할 수 있습니다
<input type="number" max="999" />
a max
와 min
값을 모두 추가 하면 허용되는 값의 범위를 지정할 수 있습니다.
<input type="number" min="1" max="999" />
위의 방법 으로도 사용자가 지정된 범위를 벗어난 값을 수동으로 입력 하지 않아도 됩니다 . 대신이 스크린 샷에 표시된대로 양식을 제출할 때이 범위 내에 값을 입력하라는 팝업이 표시됩니다.
min
및 max
속성을 지정하면 특정 범위 내에서만 입력 할 수 있습니다.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
그러나 이것은 스피너 제어 버튼에서만 작동합니다. 사용자가 allowed보다 큰 수를 입력 할 수 있지만 max
양식은 제출되지 않습니다.
Chrome 15에서 가져온 스크린 샷
당신은 할 수 에서 HTML5 사용하는 oninput
문자의 수를 제한하는 자바 스크립트에서 이벤트를 :
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
사용자가 전체 텍스트 키보드가 아닌 숫자 패드를 보도록하려는 모바일 웹 솔루션을 찾고있는 경우 . type = "tel"을 사용하십시오. maxlength와 함께 작동하여 추가 자바 스크립트를 만들지 않아도됩니다.
최대 및 최소는 여전히 사용자가 최대 및 최소를 초과하는 숫자를 입력 할 수있게하므로 최적이 아닙니다.
이 모든 것을 다음과 같이 결합 할 수 있습니다.
<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />
<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>
업데이트 :
숫자 입력을 object.length
위한 빈 문자열 이기 때문에 숫자가 아닌 문자가 입력되지 않도록 할 수도 있습니다 0
. 따라서 길이는입니다 . 따라서 maxLengthCheck
기능이 작동하지 않습니다.
솔루션 : 예를
보려면 이 내용 또는 이 내용을 참조하십시오 .
데모 -여기에서 코드의 전체 버전을보십시오 :
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
업데이트 2 : 업데이트 코드는 다음과 같습니다. https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
업데이트 3 : 소수점 이상을 입력하면 숫자 값이 엉망이 될 수 있습니다.
매우 간단합니다. 일부 자바 스크립트를 사용하면 시뮬레이션 할 수 있습니다 maxlength
.
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
는 최대 문자에서 백 스페이스를 사용할 수 없다는 것입니다. 문제 keypress
는 최대 문자 이상으로 복사하여 붙여 넣을 수 있다는 것입니다.
또는 최대 값이 99 및 최소 0 인 경우 입력 요소에 추가 할 수 있습니다 (값은 최대 값 등으로 다시 작성 됨).
<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">
그런 다음 (원한다면) 실제로 숫자가 입력되었는지 확인할 수 있습니다.
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
텍스트로 지정할 수 있지만 숫자 만 일치하는 pettern을 추가하십시오.
<input type="text" pattern="\d*" maxlength="2">
완벽하게 작동하며 모바일에서도 (iOS 8 및 Android에서 테스트 됨) 숫자 키보드가 나타납니다.
pattern
오직 검증 강조됩니다.
//For Angular I have attached following snippet.
<div ng-app="">
<form>
Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
</form>
<h1>You entered: {{number}}</h1>
</div>
"onkeypress"이벤트를 사용하면 개발하는 동안 (단위 테스트) 사용자 제한이 없습니다. 사용자가 특정 제한 이후에 입력 할 수없는 요구 사항이있는 경우이 코드를 살펴보고 한 번 시도하십시오.
또 다른 옵션은 maxlength 속성을 가진 것에 대한 리스너를 추가하고 슬라이스 값을 추가하는 것입니다. 사용자가 입력과 관련된 모든 이벤트 내에서 함수를 사용하고 싶지 않다고 가정합니다. 다음은 코드 스 니펫입니다. CSS와 HTML 코드를 무시하면 JavaScript가 중요합니다.
// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
var t = event.target;
if (t.hasAttribute('maxlength')) {
t.value = t.value.slice(0, t.getAttribute('maxlength'));
}
}
// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>
<br>
<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>
최대 길이는 <input type="number"
내가 아는 가장 좋은 방법으로 작동하지 않으므로 최대 길이 oninput
를 제한하는 이벤트를 사용 하는 것입니다. 간단한 구현을 위해 아래 코드를 참조하십시오.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
최대 허용 값을 유형 또는 스피너와 함께 1000으로 설정하려고한다고 가정하겠습니다.
다음을 사용하여 스피너 값을 제한합니다.
type="number" min="0" max="1000"
자바 스크립트를 사용하여 키보드로 입력하는 내용을 제한합니다 :
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }
"
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
다른 사람들이 말했듯이 min / max는 maxlength와 동일하지 않습니다. 사람들이 의도 한 최대 문자열 길이보다 큰 부동 소수점을 입력 할 수 있기 때문입니다. maxlength 속성을 실제로 에뮬레이트하려면 핀치에서 이와 같은 작업을 수행 할 수 있습니다 (maxlength = "16"에 해당).
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
은 숫자 입력에서 지원되지 않습니다. 이 예에서는 value.slice(0,16)
입력 값이 16자를 넘지 않으면 시작되지 않습니다.
type="number"
가 그것을 처리합니다 :).
나는이 문제를 전에 가지고 있었고 html5 숫자 유형과 jQuery의 조합을 사용하여 해결했다.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
스크립트:
$("input[name='minutes']").on('keyup keypress blur change', function(e) {
//return false if not 0-9
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}else{
//limit length but allow backspace so that you can still delete the numbers.
if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
return false;
}
}
});
이벤트가 약간 과잉인지 알지 못하지만 문제가 해결되었습니다. JSfiddle
숫자 입력의 최대 길이를 설정하는 간단한 방법은 다음과 같습니다.
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
어. 누군가 구현을 통해 반쯤 포기한 것처럼 아무도 눈치 채지 못할 것이라고 생각했습니다.
어떤 이유로 든 위의 답변은 min
및 max
속성을 사용하지 않습니다 . 이 jQuery는 마무리합니다.
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
"jQuery-is-the-devil"유형 중 하나 인 경우 jQuery없이 "oninput"이라는 이름의 함수로 작동 할 수도 있습니다.
내가 발견로서 당신은 어떤 사용할 수 없습니다 onkeydown
, onkeypress
또는 onkeyup
모바일 브라우저를 포함한 완벽한 솔루션을위한 이벤트를. 그건 그렇고 onkeypress
더 이상 안드로이드 용 크롬 / 오페라 에서 더 이상 사용되지 않습니다 ( UI 이벤트 W3C 작업 초안, 2016 년 8 월 4 일 참조 ).
oninput
이벤트 만 사용하여 해결책을 찾았습니다 . 음수 / 양수 부호 또는 10 진수 및 천 단위 구분 기호 등과 같이 필요에 따라 추가 번호 검사를 수행해야 할 수도 있지만 시작하면 다음과 같이 충분합니다.
function checkMaxLength(event) {
// Prepare to restore the previous value.
if (this.oldValue === undefined) {
this.oldValue = this.defaultValue;
}
if (this.value.length > this.maxLength) {
// Set back to the previous value.
this.value = oldVal;
}
else {
// Store the previous value.
this.oldValue = this.value;
// Make additional checks for +/- or ./, etc.
// Also consider to combine 'maxlength'
// with 'min' and 'max' to prevent wrong submits.
}
}
또한 결합하는 것이 좋습니다 maxlength
으로 min
하고 max
여러 번 위에서 언급 한 바와 같이 잘못을 제출을 방지하기 위해.
이미 답변이 있지만 입력 내용이 maxlength
속성 과 똑같이 또는 최대한 가깝게 동작 하도록하려면 다음 코드를 사용하십시오.
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();
이것은 누군가를 도울 수 있습니다.
약간의 자바 스크립트를 사용하면 모든 datetime-local 입력을 검색하고 사용자가 입력하려는 연도를 100 년 이상으로 검색 할 수 있습니다.
$('input[type=datetime-local]').each(function( index ) {
$(this).change(function() {
var today = new Date();
var date = new Date(this.value);
var yearFuture = new Date();
yearFuture.setFullYear(yearFuture.getFullYear()+100);
if(date.getFullYear() > yearFuture.getFullYear()) {
this.value = today.getFullYear() + this.value.slice(4);
}
})
});