İçin <input type="number">
eleman, maxlength
çalışmıyor. maxlength
Bu sayı öğesi için nasıl kısıtlayabilirim ?
İçin <input type="number">
eleman, maxlength
çalışmıyor. maxlength
Bu sayı öğesi için nasıl kısıtlayabilirim ?
Yanıtlar:
Ayrıca, ekleyebileceğiniz max
en yüksek sayıyı belirten bir özellik ekleyebilirsiniz
<input type="number" max="999" />
Eğer a hem eklerseniz max
ve bir min
değer, izin değer aralığını belirtebilirsiniz:
<input type="number" min="1" max="999" />
Yukarıda hala edecek değil elle belirtilen aralığın değeri dışında girmesini bir kullanıcı durdurun. Bunun yerine, formu bu ekran görüntüsünde gösterildiği gibi gönderdikten sonra bu aralıkta bir değer girmesini bildiren bir açılır pencere görüntülenir:
Yalnızca belirli bir aralıkta girişe izin verecek olan min
ve max
niteliklerini belirtebilirsiniz .
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Ancak bu yalnızca eğirme kontrol düğmeleri için geçerlidir. Kullanıcı izin verilen sayıdan daha büyük bir sayı yazabilse de max
, form gönderilmez.
Ekran görüntüsü Chrome 15'ten alındı
Sen edebilirsiniz HTML5 kullanmak oninput
karakter sayısını sınırlamak için JavaScript olayı:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
Kullanıcınızın tam metin klavyesi yerine bir sayı paneli görmesini istediğiniz bir Mobil Web çözümü arıyorsanız . Type = "tel" kullanın. Ekstra javascript oluşturmanıza engel olan maxlength ile çalışacaktır.
Maks ve Min, kullanıcının maksimum ve min'den fazla sayı yazmasına izin verir, bu da optimum değildir.
Bunların tümünü şu şekilde birleştirebilirsiniz:
<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>
Güncelleme:
Sayısal olmayan karakterlerin girilmesini de engellemek isteyebilirsiniz, çünkü object.length
sayı girişleri için boş bir dize olacaktır ve bu nedenle uzunluğu olacaktır 0
. Böylece maxLengthCheck
fonksiyon çalışmaz.
Çözüm:
Örnekler için bu veya buna
bakın .
Demo - Kodun tam sürümüne buradan bakın:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Güncelleme 2: Güncelleme kodu: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Güncelleme 3: Ondalık noktadan daha fazlasının girilmesine izin verilmesinin sayısal değerle karışabileceğini lütfen unutmayın.
çok basit, bazı javascript ile simüle edebilirsiniz maxlength
, bir göz atın :
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
, maksimum karakterde geri silme özelliğini kullanamamanızdır. sorun, keypress
maksimum karakterlerin ötesine kopyalayıp yapıştırabilmeniz.
Veya maksimum değeriniz örneğin 99 ve minimum 0 ise, bunu giriş öğesine ekleyebilirsiniz (değeriniz maksimum değerinizle yeniden yazılır vb.)
<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">
Sonra (isterseniz), girişin gerçekten sayı olup olmadığını kontrol edebilirsiniz
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Metin olarak belirtebilirsiniz, ancak yalnızca sayılarla eşleşen pettern ekleyebilirsiniz:
<input type="text" pattern="\d*" maxlength="2">
Mükemmel çalışır ve ayrıca mobil cihazlarda (iOS 8 ve Android'de test edilmiştir) sayı klavyesini çıkarır.
pattern
Sadece doğrulama vurgulama neden olur.
//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" olayını kullanırsanız, geliştirirken herhangi bir kullanıcı sınırlaması alamazsınız (birim testi). Ayrıca, kullanıcının belirli bir sınırdan sonra girmesine izin vermeyen bir gereksiniminiz varsa, bu kodu inceleyin ve bir kez deneyin.
Başka bir seçenek, sadece maxlength özniteliğine sahip herhangi bir şey için bir dinleyici eklemek ve dilim değerini buna eklemektir. Kullanıcının girdiyle ilgili her olayın içinde bir işlev kullanmak istemediği varsayılarak. İşte bir kod snippet'i. CSS ve HTML kodunu dikkate almayın, JavaScript önemlidir.
// 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>
Maksimum uzunluk , maxlength'i sınırlamak için olayı <input type="number"
kullanmak olduğunu bildiğim en iyi yolla çalışmaz oninput
. Basit uygulama için lütfen aşağıdaki koda bakın.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Diyelim ki, izin verilen maksimum değerin 1000 yazıldığını veya değer değiştirici ile olmasını istediğinizi varsayalım.
Değer değiştirici değerlerini aşağıdakileri kullanarak kısıtlarsınız:
type="number" min="0" max="1000"
ve javascript ile klavyeyle yazılanları kısıtlayın:
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; }">
Diğerleri tarafından belirtildiği gibi, min / max, maxlength ile aynı değildir, çünkü insanlar hala istediğiniz maksimum dize uzunluğundan daha büyük bir şamandıra girebilir. Maxlength özelliğini gerçekten taklit etmek için, bir tutamda böyle bir şey yapabilirsiniz (bu maxlength = "16" ile eşdeğerdir):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
sayı girişleri tarafından desteklenmez. Benim örnekte, value.slice(0,16)
giriş değeri 16 karakterden uzun olmadığı sürece de atmayacak.
type="number"
ilgilenir :).
Maycow Moura'nın yanıtı iyi bir başlangıçtı. Ancak onun çözümü, ikinci basamağa girdiğinizde alanın tüm düzenlemesinin durduğu anlamına gelir. Böylece değerleri değiştiremez veya karakterleri silemezsiniz.
Aşağıdaki kod 2'de durur, ancak düzenlemenin devam etmesine izin verir;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Daha önce bu sorunu vardı ve html5 sayı türü ve jQuery bir arada kullanarak çözdüm.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
senaryo:
$("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;
}
}
});
Olayların biraz abartılı olup olmadığını bilmiyorum ama sorunumu çözdü. JSfiddle
HTML Girişi
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
sayı girişleri için maksimum uzunluğu ayarlamanın basit bir yolu:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Olduğu gibi type="number"
, mümkün olan maksimum sayı olan bir özellik max
yerine belirtirsiniz maxlength
. Yani 4 basamaklı max
olmalı 9999
, 5 basamaklı 99999
vb.
Ayrıca, bunun pozitif bir sayı olduğundan emin olmak istiyorsanız min="0"
, pozitif sayılar sağlayarak ayarlayabilirsiniz .
Ugh. Sanki birisi onu uygulayarak yarı yolda vazgeçti ve kimsenin fark etmeyeceğini düşündü.
Hangi nedenle olursa olsun, yukarıdaki cevaplar min
ve max
niteliklerini kullanmaz . Bu jQuery bitirir:
$('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);
});
Ayrıca, bu "jQuery-the-devil" türlerinden biri varsa, jQuery w / o giriş adında bir işlev "oninput" olarak da çalışır.
Bildiğim gibi onkeydown
, mobil tarayıcılar da dahil olmak üzere eksiksiz bir çözüm için hiçbirini onkeypress
veya onkeyup
etkinliği kullanamazsınız . Bu arada onkeypress
, android için krom / opera'da kullanımdan kaldırıldı ve artık mevcut değil (bkz: UI Events W3C Çalışma Taslağı, 04 Ağustos 2016 ).
Sadece oninput
olayı kullanarak bir çözüm buldum . Negatif / pozitif işaret veya ondalık ve binlik ayırıcı ve benzerleri gibi gerektiğinde ek numara kontrolü yapmanız gerekebilir, ancak başlangıç olarak aşağıdakiler yeterli olmalıdır:
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.
}
}
Ben de birleştirmek için öneriyoruz maxlength
ile min
ve max
birkaç kez yukarıda belirtildiği gibi yanlış başvurularını önlemek için.
Zaten bir yanıt olduğunu biliyorum, ancak girişinizin tam olarak maxlength
öznitelik gibi davranmasını veya olabildiğince yakın olmasını istiyorsanız, aşağıdaki kodu kullanın:
(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();
Bu birine yardımcı olabilir.
Biraz javascript ile tüm datetime-local girişleri arayabilir, kullanıcının girmeye çalıştığı yılı, gelecekte 100 yıldan daha uzun süre arayabilirsiniz:
$('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);
}
})
});