Field Percentage in HTML

Navigation
3

Good morning! I am developing a restful application, using angular 4, components of PrimeNg (version 5), HTML 5 and CSS 3 in the front part. I came across a problem that apparently can be considered simple but I do not find anything that helps me in google. I need to have an inputtext type number field that allows me to include a "mask" for percentage without using JQuery or JS to perform the procedure. As I'm studying HTML5 I do not have much knowledge about what we can achieve using it.

Exemplifying (very rough example): 

<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>
    
asked by anonymous 24.04.2018 / 13:02

3 answers

2

This percentage mask would be just for visual effects right? The closest solution I could find was using only html and css , make sure it matches what you need. 

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>
    
24.04.2018 / 14:00
2

I do not know if this option is for you, but there are two ways to "bar" you can do this. using value increments and showing a percentage in the bar. In the case of the example below it determines 60% of 100

Using the progress tag, the bar shows the evolution of a value, it needs a known total value, and you can make increments. link 

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

The other option is the meter tag it determines a percentage of a total. It is not a progress bar, it only shows an X value between a given range , it is used to show when space is occupied on a disk for example. link 

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

Option with JavaScript

This script only allows you to enter numbers from 0 to 100 in the input, note that they are not 100 characters, but numbers up to the value of 100. And after the input has a span with%. Sometimes it can serve you as well. 

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>
    
24.04.2018 / 13:07
1

You can use oninput (for control of inserted character numbers) and a onblur (which will mask when focus is taken), all inline in the same field, without call function.

The code I've done for each attribute deals with all of this, as shown below: 

<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">
    
24.04.2018 / 21:44
Doubt: Function of generators How to control Scroll in JS / jQuery