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.

Resolvendo o problema de Maxlength de campos número no Chrome

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.

Javascript - Proxy

Chega de tentar manter o controle das variáveis pelo escopo global, e de resistir à programação orientada a objetos. As novas frameworks do mercado Web, voltadas para javascript, colocaram tudo dentro de objetos, e mantem rígido controle sobre propriedades, e não mais valores soltos de variáveis, que tornam a vida do programador um inferno.

Manipulador de atribuição e recuperação

Usaremos um manipulador de atribuição (set) e recuperação de propriedades (get) bem simples, para todo conjunto de parâmetros proxiados de uma script javascript:

var handler = {
    get: function(obj, prop) {
        return name in target ? target[name] : null;
        },
    set: function(obj, prop, value) {
        obj[prop] = value;
        }
};

Vamos definir, igualmente, um objeto proxiado "p":

var p = new Proxy({}, handler);

Quando a página for carregada, vamos carregar a função init(), que faz as atribuições. Este é o método correto para garantir que toda a página e suas scripts estejam carregadas, antes que qualquer instrução possa ter sido executada:

function init(){
    p.a = 144;
    p.b = 225;
    }

Página completa

<script>
var handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : null;
        },
    set: function(obj, prop, value) {
        obj[prop] = value;
        }
};

// Propriedade/Variável a ser proxiada
var p = new Proxy({}, handler);

function init(){
    p.a = 144;
    p.b = 225;
    }</script>
<body onload="init();alert(p.a)">
</body>

Execução

Vamos utilizar o navegador Chrome para o debug da script:

Vejamos o que será feito em relação a esta atribuição, seguindo o debug:

O objeto em questão "p" terá sua propriedade "a" definida com valor 144. Este objeto é realmente um array.

Vamos saltar para o método de recuperação, quando for emitido o alert(p.a):

 A chamada alcança o método "get" do handler de objetos. Como a propriedade pertence ao objeto, o valor do item do array é correspondente.

Aumentando a eficiência

Mas a eficiência e a proteção das "variáveis" proxiadas aumenta com o expediente de se fazer o proxiamento ser um comportamento natural de objetos instanciados por funções anônimas, associado à camada de exibição das páginas HTML

Trataremos disto em nosso próximo encontro neste blog.