segunda-feira, 17 de junho de 2019

Maxsize don't work on number field of HTML INPUT

Por incrível que pareça, o grupo Google introduziu um controle de valores em seu campo número, que anulou os atributos "min" e "max", quando da entrada manual de INPUT.

A resolução quase que traz de volta os velhos tempo de controle de edição de texto "na unha" que fazíamos em linguagem C e Pascal.

A resolução se dá em duas partes:

Instrução HTML:


<input id="Id" type="number" data-anterior="" size="6" maxlength="6" onkeydown="checkLen(this,event);">

Código Javascript:

function checkLen(obj,evento){
var taMax = obj.maxLength;
var vrCampo = obj.value;
var vId = obj.id;
var vrant = obj.getAttribute("data-anterior");
        // Captura tecla
if( evento.key ){


console.log(obj+" "+evento.key);
var key = event.keyCode || event.charCode;
var vrCampo = obj.value;
if( ( key == 8 || key == 46 ) && vrCampo.length > 0 ){
vrCampo = vrCampo.substr(0,vrCampo.length-1);
obj.setAttribute("data-anterior",vrCampo);
document.querySelector("#"+vId).value = vrCampo;
evento.preventDefault();
return;
}
} else return;
event.stopPropagation();

var lista = "0123456789";
var posicao = lista.indexOf(evento.key);
// Não é número
if( posicao < 0 ){
vrCampo = vrant;
obj.value = vrCampo;
document.querySelector("#"+vId).value = vrant;
evento.preventDefault();
} else {
// É numero
if( vrCampo.length >= taMax ){
vrCampo = vrant;
obj.value = vrCampo
document.querySelector("#"+vId).value = vrant;
evento.preventDefault();
} else {
vrCampo = vrant + evento.key
obj.setAttribute("data-anterior",vrCampo);
document.querySelector("#"+vId).value = vrCampo;
evento.preventDefault();
}
}
}

Quando utilizávamos a biblioteca "curses" da linguagem "C" tinhamos que nos preocupar com cada tecla pressionada, e seus efeitos. Reparem a necessidade de tratamento do backspace.

Nenhum comentário:

Postar um comentário