'Is there any way I can keep the type of a percentage as number after doing number formatting?
I changed a number lets say (150) to 150.00% using number formatting. Now this is the way I want to display the number with the percentage sign. But I want it to be of number type but it is of type string. Is there any way I can do this?
Solution 1:[1]
No. A number is just a number, it has nothing to indicate what you're using that number for — a percentage, a currency amount, the number of angels that can dance on the head of a pin, etc. It's just a number.
You'll need to store two pieces of information: The number, and the fact it's a percentage.
Solution 2:[2]
Hi if you want to keep the number type in input tag then its good to go with bootstrap input-group-append/prepend to add % sign. this will keep the input with number formet and you will able to show % sign as well.
take a look on this demo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Input group</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Bootstrap Input Group Example</h1>
<p>This is demo about append and prepend using bootstrap</p>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" placeholder="number" aria-label="Number" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">%</span>
</div>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | T.J. Crowder |
| Solution 2 | Rahul Joshi |