Field Percentage in HTML

Asked

Viewed 4,043 times

3

good morning! I am developing a restful application, using angular 4, components of Primeng (version 5), HTML 5 and CSS 3 on the front. I came across a problem that apparently can be considered simple but I can not find anything to help me in Google. I need to have an inputtext field type number that allows me to include a "mask" for percentage without using Jquery or JS to perform the procedure. As I’m studying HTML5 I don’t have much knowledge about what we can achieve used it.

Exemplifying (very crude 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>
html5 percentage input

  • Michel, what kind of mask would that be? Separate the numbers by decimal places? As the maximum percentage is 100%, as it would be to limit the entered value (by what I read in the comments of the posted answers)?

  • Oops. Each employee has a commission to be received calculating the percentage of their commission on the value of the service provided. Example in practice: The employee provided the "X" service that costs R $ 50,00 and has a percentage of 20,48% on each service. With this I will have how to calculate how much he should receive "commission". It is precisely this percentage field that I want to use... if the administrator type 2048, the field becomes 20.48. The same thing I will apply in the monetary field, but without the need to limit it to 100. I will comment in the @Leandro reply what I have achieved so far

  • You can use an attribute oninput="código aqui" in the field to make the mask using a JS code where have código aqui.

  • It would look something like this: https://jsfiddle.net/4Ldomnr2/

  • @dvd, that would be exactly what it would be. According to responses and tests done with the primeNg component I think I will have to use the mask via JS itself. That’s a very good example of you. You would only have to adjust to when you choose the value via the component of the number (arrows) the value is in the field because it is cleaning or when you type a value and use the arrows to increment/decrement it puts 100%... but it is in this line same.

  • Check now: https://jsfiddle.net/4Ldomnr2/2/

  • That’s it!! Thank you very much @dvd! I will understand what you did to have a notion... I was researching and I found some angular masks (ng2-currency-Mask and ng2-money-Mask) that I think can also use.

  • In this one I left commented in function form for better visualization: https://jsfiddle.net/4Ldomnr2/4/

  • @dvd, if possible put your comment as the topic response so I can put as accepted the problem. Thanks again!

Show 4 more comments

3 answers

2

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

Using the tag progress the bar shows the evolution of a value, it needs a known total value and vc can go making increments. https://www.w3schools.com/tags/tag_progress.asp

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

The other option is the tag meter it determines a percentage of a total. It is not a progress bar, it just shows a value X between a crease given, it is often used to show when space is occupied on a disk for example. https://www.w3schools.com/tags/tag_meter.asp

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

Option with Javascript

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

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>

  • Opa, thanks for the answer but these cases would not fit with the purpose I’m thinking. This field will be used to calculate the amount the employee will receive on top of a service provided. It would be a "donkey" field only to receive a decimal value but complete for the user in percentage form. If the user type 9999 that the autocomplete field for 99.99 or if the user type "." or "," the field always includes comma. I saw some question using regular expression but could not put in practice.

  • Ah now it’s easier to understand what you need. Well I’ll leave the answer only with reference. But if you prefer I can remove it too...

  • 1

    Leave it as a reference if it fits for someone to use... I saw some questions about using maxfractiondigits but from what I understood is using a JSF tag (convertNumber) which is also not the case. I researched some things from Angular 4 as well but without success.

  • @Michel my knowledge of JS is very limited, and of worse Angular I never worked with him, I think that more than that answer I will not be able to help you. But find out if there is a Range Component in Angular sometimes helps you, like this: https://css-tricks.com/value-bubbles-for-range-inputs/

  • I appreciate the answers. I will look for more on range... in my searches I saw matters on but I did not go deeper.

2


This percentage mask would really only be for visual effects right? The closest solution I could find was this using only html and css, make sure this meets 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>

  • Opa @Leandro. Thank you for the answer. The field should also be saved in the database. I will test this example. I got understand what would be the step... it’s like a counter that auto-increments with the value passed... but from what I saw would not have value limitation and if the user type the field is not formatted, right?

  • @Michel Anyway the value entered by the user can be saved in the database, except only for the percentage symbol. The step defines how much the field will be incremented or decreased by clicking on the arrows of input (in the above example is to increment or decrease from 0.01 to 0.01). It is possible to define minimum and maximum value limits with attributes min and max, according to the edition I made in the reply.

  • I used the Primeng component (https://www.primefaces.org/primeng/#/spinner) that works with step... I was able to follow the step='0.01' min="0.01" max="100.00"... but I can’t type 9999 and the field put 99.99. If you type 9999 the field goes to the maximum value, in this case 100 and allows me to type 10.8987897897 without limit in the fields after the comma...

  • +1, but you can use data-Attributes to create custom attributes, e.g: data-unit. https://i.imgur.com/mheI3ky.png

1

You can use a oninput (to control numbers of inserted characters) and a onblur (that will make the mask when taking focus), all inline in the same field, without calling function.

The code I made for each attribute deals with all this, as an example 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">

Browser other questions tagged html5 percentage input

You are not signed in. Login or sign up in order to post.