Para o <input type="number">
elemento, maxlength
não está funcionando. Como posso restringir o maxlength
elemento desse número?
Para o <input type="number">
elemento, maxlength
não está funcionando. Como posso restringir o maxlength
elemento desse número?
Respostas:
E você pode adicionar um max
atributo que especifique o número mais alto possível que você pode inserir
<input type="number" max="999" />
se você adicionar max
um min
valor e um, poderá especificar o intervalo de valores permitidos:
<input type="number" min="1" max="999" />
O item acima ainda não impedirá o usuário de inserir manualmente um valor fora do intervalo especificado. Em vez disso, ele receberá um pop-up solicitando que ele insira um valor nesse intervalo ao enviar o formulário, conforme mostrado nesta captura de tela:
Você pode especificar os atributos min
e max
, que permitirão entrada apenas dentro de um intervalo específico.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Porém, isso funciona apenas para os botões de controle giratório. Embora o usuário possa digitar um número maior que o permitido max
, o formulário não será enviado.
Captura de tela retirada do Chrome 15
Você pode usar o oninput
evento HTML5 no JavaScript para limitar o número de caracteres:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
Se você está procurando uma solução para Web móvel na qual deseja que o usuário veja um teclado numérico em vez de um teclado de texto completo. Use type = "tel". Ele funcionará com o maxlength, o que evita a criação de javascript extra.
Max e Min ainda permitirão que o usuário digite números acima de max e min, o que não é o ideal.
Você pode combinar tudo isso assim:
<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>
Atualização:
você também pode impedir a inserção de caracteres não numéricos, porque object.length
seria uma sequência vazia para as entradas numéricas e, portanto, seu comprimento seria 0
. Portanto, a maxLengthCheck
função não funcionará.
Solução:
Veja isto ou isto para obter exemplos.
Demo - Veja a versão completa do código aqui:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Atualização 2: Aqui está o código de atualização: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Atualização 3: Observe que permitir que mais de um ponto decimal seja inserido pode atrapalhar o valor do numeral.
é muito simples, com algum javascript você pode simular um maxlength
, confira:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
é que você não pode usar backspace com no máximo caracteres. O problema keypress
é que você pode copiar e colar além dos caracteres máximos.
Ou se o seu valor máximo for, por exemplo, 99 e o mínimo 0, você poderá adicioná-lo ao elemento de entrada (seu valor será reescrito pelo seu valor máximo, etc.)
<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">
Então (se você quiser), você pode verificar se a entrada é realmente o número
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Você pode especificá-lo como texto, mas adicione pettern, que corresponde apenas a números:
<input type="text" pattern="\d*" maxlength="2">
Funciona perfeitamente e também no celular (testado no iOS 8 e Android) exibe o teclado numérico.
pattern
únicas causas destacam a validação.
//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>
Se você usar o evento "onkeypress", não receberá nenhuma limitação do usuário enquanto estiver desenvolvendo (teste de unidade). E se você possui requisitos que não permitem que o usuário entre após um determinado limite, consulte este código e tente uma vez.
Outra opção é adicionar apenas um ouvinte a qualquer coisa com o atributo maxlength e adicionar o valor da fatia a ele. Supondo que o usuário não queira usar uma função em todos os eventos relacionados à entrada. Aqui está um trecho de código. Ignore o código CSS e HTML, o JavaScript é o que importa.
// 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>
O comprimento máximo não funcionará <input type="number"
da melhor maneira que eu sei é usar oninput
event para limitar o comprimento máximo . Por favor, veja o código abaixo para uma implementação simples.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Digamos que você desejasse que o valor máximo permitido fosse 1000 - digitado ou com o botão giratório.
Você restringe os valores do girador usando:
type="number" min="0" max="1000"
e restrinja o que é digitado pelo teclado com javascript:
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; }">
Conforme declarado por outros, min / max não é o mesmo que maxlength porque as pessoas ainda podem entrar em um flutuador que seria maior que o comprimento máximo da string que você pretendia. Para realmente emular o atributo maxlength, você pode fazer algo assim em uma pitada (isso é equivalente a maxlength = "16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
não é suportado por entradas numéricas. No meu exemplo, value.slice(0,16)
não será ativado, a menos que o valor de entrada tenha mais de 16 caracteres.
type="number"
cuida disso :).
A resposta de Maycow Moura foi um bom começo. No entanto, sua solução significa que, quando você digita o segundo dígito, toda a edição do campo é interrompida. Portanto, você não pode alterar valores ou excluir nenhum caractere.
O código a seguir para em 2, mas permite que a edição continue;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Eu já tinha esse problema e resolvi-o usando uma combinação de tipo de número html5 e jQuery.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
roteiro:
$("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;
}
}
});
Não sei se os eventos são um pouco exagerados, mas isso resolveu meu problema. JSfiddle
uma maneira simples de definir o comprimento máximo para entradas numéricas é:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Assim como type="number"
você especifica uma propriedade em max
vez de maxlength
, que é o número máximo possível possível. Assim, com 4 dígitos, max
deve ser 9999
, 5 dígitos 99999
e assim por diante.
Além disso, se você quiser ter certeza de que é um número positivo, pode definir min="0"
, garantindo números positivos.
Ugh. É como se alguém desistisse no meio da implementação e pensasse que ninguém notaria.
Por alguma razão, as respostas acima não usar o min
e max
atributos. Este jQuery termina:
$('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);
});
Provavelmente também funcionaria como uma função nomeada "oninput" sem jQuery se você é um desses tipos "jQuery é o diabo".
Como eu descobri que você não pode usar qualquer um onkeydown
, onkeypress
ou onkeyup
eventos para uma solução completa, incluindo navegadores móveis. A propósito, ele onkeypress
está obsoleto e não está mais presente no chrome / opera para android (consulte: UI Events W3C Working Draft, 04 de agosto de 2016 ).
Eu descobri uma solução usando oninput
apenas o evento. Pode ser necessário fazer uma verificação adicional do número, conforme necessário, como sinal negativo / positivo ou separadores decimais e mil, e assim por diante, mas, para começar, o seguinte deve ser suficiente:
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.
}
}
Eu recomendaria também para combinar maxlength
com min
e max
para evitar que submete erradas como dito acima várias vezes.
Sei que já existe uma resposta, mas se você deseja que sua entrada se comporte exatamente como o maxlength
atributo ou o mais próximo possível, use o seguinte código:
(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();
Isso pode ajudar alguém.
Com um pouco de javascript, você pode procurar todas as entradas locais de data e hora, pesquisar se o ano que o usuário está tentando inserir, maior que 100 anos no futuro:
$('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);
}
})
});