3

bom dia! Estou a desenvolver uma aplicação restful, utilizando angular 4, componentes do PrimeNg (versão 5), HTML 5 e CSS 3 na parte de front. Me deparei com um problema que aparentemente pode ser considerado simples porém não encontro nada que me auxilie no google. Preciso ter um campo inputtext tipo number que me permita incluir uma "máscara" para porcentagem sem utilizar JQuery ou JS para realizar o procedimento. Como estou estudando HTML5 não tenho muito conhecimento sobre o que podemos alcançar utilizado ele.

Exemplificando (exemplo bem tosco):

<div class="">
<input type="checkbox" for="teste"> Utiliza porcentagem sobre serviço</input>
</div>
<div class="">
<input type="number" id="teste"> <!-- QUE ESTE INPUT SEJA EM FORMATO DE PORCENTAGEM -->
</div>
9
  • Michel, que tipo de máscara seria essa? Separar os números por casas decimais? Como a porcentagem o máximo é 100%, como seria isso de limitar o valor digitado (pelo que li nos comentários das respostas postadas)?
    – Sam
    24/04/2018 às 16:07
  • Opa. Cada colaborador tem uma comissão a ser recebida calculando a porcentagem da sua comissão sobre valor do serviço prestado. Exemplo na prática: O colaborador prestou o serviço "X" que custa R$ 50,00 e possui percentual de 20,48% sobre cada serviço. Com isso terei como calcular o quanto ele deverá receber de "comissão". É justamente este campo de percentual que quero utilizar... caso o administrador digite 2048, o campo passe a ser 20,48. A mesma coisa aplicarei no campo monetário, porém sem a necessidade de limitar a 100. Irei comentar na resposta do @Leandro o que consegui até o momento
    – Michel
    24/04/2018 às 16:37
  • Vc pode usar um atributo oninput="código aqui" no campo para fazer a máscara usando um código JS onde tem código aqui.
    – Sam
    24/04/2018 às 16:44
  • Seria algo assim: jsfiddle.net/4Ldomnr2
    – Sam
    24/04/2018 às 17:28
  • @dvd, seria exatamente isso. Conforme respostas e testes feitos com o componente do primeNg acho que terei que utilizar a máscara via JS mesmo. Esse seu exemplo é muito bom. Apenas teria que ajustar para quando escolher o valor via componente do number (setas) o valor fique no campo porque está limpando ou quando digita um valor e utiliza as setas para incrementar/decrementar ele coloca 100%... mas é nessa linha mesmo.
    – Michel
    24/04/2018 às 17:40

3 Respostas 3

2

Essa máscara de porcentagem seria mesmo só para efeitos visuais né? A solução mais próxima que consegui encontrar foi essa utilizando apenas html e css, verifique se isso atende ao que você precisa.

label, input {
position: relative;
width: 78px;
}

label::after {
content: '' attr(unit);
position: absolute;
top: 3px;
left: 45px;
font-family: arial, helvetica, sans-serif;
font-size: 13px;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
}
Porcentagem <label unit="%">
<input type='number' id="teste" step='0.01' value='0.01' min="0.01" max="70.00" placeholder='0.00' />
<label>

4
  • Opa @Leandro. Obrigado pela resposta. O campo deverá ser salvo também na base de dados. irei testar este exemplo. Consegui entendi o que seria o step... é como se fosse um contador que auto-incrementa com o valor passado... mas pelo que eu vi não teria limitação de valores e caso o usuário digite o campo não é formatado, certo?
    – Michel
    24/04/2018 às 12:23
  • @Michel De qualquer modo o valor inserido pelo usuário poderá ser salvo na base de dados, com exceção apenas do símbolo de porcentagem. O step define de quanto em quanto o campo será incrementado ou decrementado ao clicar nas setinhas do input (no exemplo acima está para incrementar ou decrementar de 0,01 em 0,01). É possível definir limites de valores mínimos e máximos com os atributos min e max, conforme edição que fiz na resposta.
    – Leandro
    24/04/2018 às 12:38
  • utilizei o componente do PrimeNg (primefaces.org/primeng/#/spinner) que trabalha com step... consegui seguir a linha de incluir step='0.01' min="0.01" max="100.00"... porém não consigo digitar 9999 e o campo coloque 99,99. Caso digite 9999 o campo passa para o valor máximo, nesse caso, 100 e permite que eu digite 10.8987897897 sem limite nos campos após a vírgula...
    – Michel
    24/04/2018 às 16:41
  • +1, mas você pode utilizar data-attributes para criar atributos personalizados, e.g: data-unit. i.imgur.com/mheI3ky.png 24/04/2018 às 21:06
2

Não sei se essa opção serve para vc, mas tem duas forma de "barra" vc consegue fazer isso. usando incrementos de valor e mostrando um porcentagem na barra. No caso do exemplo abaixo ela determina 60% de 100

Usando a tag progress a barra mostra a evolução de um valor, ele precisa de um valor total conhecido e vc pode ir fazendo incrementos. https://www.w3schools.com/tags/tag_progress.asp

 <progress value="60" max="100"></progress>


A outra opção é a tag meter ele determina uma porcentagem de um total. Ela não é uma barra de progresso, ela apenas mostra um valor X entre um range determinado, é muito usada para mostrar quando de espaço está ocupado em um disco por exemplo. https://www.w3schools.com/tags/tag_meter.asp

<meter value="2" min="0" max="10">3 out of 10</meter><br>


Opção com JavaScript

Esse script só permite que se digite no input números de 0 a 100, repare que não são 100 caracteres, e sim números até o valor de 100. E depois do input tem um span com o %. As vezes pode te servir tb.

function limite(e) {
        try {
            var element = e.target
        } catch (er) {};
        try {
            var element = event.srcElement
        } catch (er) {};
        try {
            var ev = e.which
        } catch (er) {};
        try {
            var ev = event.keyCode
        } catch (er) {};
        if ((ev != 0) && (ev != 8) && (ev != 13))
            if (!RegExp(/[0-9]/gi).test(String.fromCharCode(ev))) return false;
        if (element.value + String.fromCharCode(ev) > 100) return false;
    }
    window.onload = function () {
        document.getElementById('texto').onkeypress = limite
    }
input {
    font-size: 24px;
    width: 3ch; /* largura do campo */
    padding-right: 0.25em;
    padding-left: 0.25em; 
    margin-right: 0.5rem;
    text-align: right; /* alinha texto a direita */
}
<input type="text" id="texto" maxlength="3" /><span>%</span>

5
  • Opa, obrigado pela resposta porém esses casos não se encaixariam com o propósito que estou pensando. Este campo será utilizado para calcular o valor que o funcionário terá para receber em cima de um serviço prestado. Seria um campo "burro" apenas para receber um valor decimal mas que complete para o usuário em forma de porcentagem. Se o usuário digitar 9999 que o campo autocomplete para 99,99 ou caso o usuário digite "." ou "," que o campo sempre inclua vírgula. Vi algumas questão utilizando expressão regular mas não consegui colocar em prática.
    – Michel
    24/04/2018 às 11:29
  • Ah agora ficou mais fácil de entender o que vc precisa. Bom vou deixar a resposta apenas com referência. Mas se vc preferir eu posso remove-la também...
    – hugocsl
    24/04/2018 às 11:34
  • 1
    Deixa como referência para caso se enquadre para alguma pessoa utilizar... Vi algumas questões sobre utilizar maxfractiondigits mas pelo que eu entendi é utilizando uma tag do JSF (convertNumber) que também não é o caso. Pesquisei algumas coisas do angular 4 também mas sem sucesso.
    – Michel
    24/04/2018 às 11:37
  • @Michel meus conhecimentos de JS são bem limitados, e de Angular pior ainda nunca trabalhei com ele, acho que mais do que essa resposta não vou poder te ajudar. Mas descubra se existe o Componente de Range no Angular as vezes te ajuda, tipo isso: css-tricks.com/value-bubbles-for-range-inputs
    – hugocsl
    24/04/2018 às 12:02
  • agradeço as respostas. Irei procurar mais sobre range... nas minhas buscas vi assuntos sobre porém não me aprofundei.
    – Michel
    24/04/2018 às 12:09
1

Você pode usar um oninput (para controle de números de caracteres inseridos) e um onblur (que irá fazer a máscara ao tirar o foco), tudo inline no campo mesmo, sem chamar função.

O código que fiz para cada atributo trata de tudo isso, conforme exemplo abaixo:

<input oninput="v_ = this.value; if(v_.length > 5){ this.value = v_.slice(0, 5); }" onblur="v_ = this.value; if(!~v_.indexOf('.')){ vl_ = v_.length; z_ = vl_ == 1 ? '0.00' : ( vl_ == 3 ? '0' : (vl_ == 2 ? '00' : ''));this.value = v_.length < 5 && v_ != '100' ? (((v_[0] ? v_[0] : '')+(v_[1] ? v_[1]+'.' : '')+(v_[2] ? v_[2] : '')+(v_[3] ? v_[3] : '')+(v_[4] ? v_[4] : '')+z_)):('100.00')};" type="number" id="teste" step=".01" min=".01" max="100">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .