Geek Answers Handbook

Entering HTML5 number - display in percent instead of decimal

I have a form that includes numerical inputs, which should represent percentages that are configured something like this:

<input type="number" min="0" max="1" step="0.01" />

Values ​​are currently displayed as decimal numbers, for example, 0.25. I think it would be much more convenient if the number displayed in the text box would be displayed as a percentage. I have already disabled keyboard input in the field using the jQuery code below, so I'm not worried about users entering rogue values:

 $('input[type="number"]').keypress(function (field) { field.preventDefault(); });

Is there an easy way to change the number fields to display a percentage?

Thanks!

+14
javascript jquery html5
source share
4 answers

There are two ways that I hope will work.

If you want to enter percentages in the input and want to convert them to decimal numbers in js, then:

 <input type="number" min="1" max="100" id="myPercent"/>

in js:

 document.getElementById('myForm').onsubmit = function() { var valInDecimals = document.getElementById('myPercent').value / 100; }

If the scenario is reverse, then:

 <input type="number" min="0" max="1" step="0.01" id="myPercent"/>

in js:

 document.getElementById('myForm').onsubmit = function() { var valInDecimals = document.getElementById('myPercent').value * 100; }
+4
source share

Perhaps add a function, the displayed number (for example, 0.25) * 100 + "%", so you will always have it as a percentage.

 function topercentage() { var outputnumber = outputnumber * 100 + "%"; }

In this example, outputnumber is a number, for example, 0.25. Hope this works.

0
source share

Try:

 <html> <head> </head> <body> <input type="text" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $('input[type="text"]').keyup(function(e) { var num = $(this).val(); if (e.which!=8) { num = sortNumber(num); if(isNaN(num)||num<0 ||num>100) { alert("Only Enter Number Between 0-100"); $(this).val(sortNumber(num.substr(0,num.length-1)) + "%"); } else $(this).val(sortNumber(num)+"%"); } else { if(num < 2) $(this).val(""); else $(this).val(sortNumber(num.substr(0,num.length-1)) + "%"); } }); function sortNumber(n){ var newNumber=""; for(var i = 0; i<n.length; i++) if(n[i] != "%") newNumber += n[i]; return newNumber; } </script> </body> </html>
0
source share

Although this is not HTML5 input type = 'number', the solution below uses input type = 'text' with the same effect. The rational use of type = 'number' as humans requires a nicely formatted string, such as "23.75%," while robots prefer to read integers, and floating points should be avoided. The following is a code snippet accurate to 2 decimal places.

I have not tested it on a mobile phone, but I think that the numeric keypad should display as with input type = "number".

Codepen.io: Commented code can be found here.

 document.querySelector('.percent').addEventListener('input', function(e) { let int = e.target.value.slice(0, e.target.value.length - 1); if (int.includes('%')) { e.target.value = '%'; } else if (int.length >= 3 && int.length <= 4 && !int.includes('.')) { e.target.value = int.slice(0, 2) + '.' + int.slice(2, 3) + '%'; e.target.setSelectionRange(4, 4); } else if (int.length >= 5 & int.length <= 6) { let whole = int.slice(0, 2); let fraction = int.slice(3, 5); e.target.value = whole + '.' + fraction + '%'; } else { e.target.value = int + '%'; e.target.setSelectionRange(e.target.value.length - 1, e.target.value.length - 1); } console.log('For robots: ' + getInt(e.target.value)); }); function getInt(val) { let v = parseFloat(val); if (v % 1 === 0) { return v; } else { let n = v.toString().split('.').join(''); return parseInt(n); } } 
 <input class="percent" type="text" value="23.75%" maxlength="6">

0
source share

More articles:


All Articles