Cambié un número, digamos (150) a 150,00% usando el formato de número. Ahora esta es la forma en que quiero mostrar el número con el signo de porcentaje. Pero quiero que sea de tipo número pero es de tipo cadena. ¿Hay alguna manera de que pueda hacer esto?
No. Un número es solo un número, no tiene nada que indique para qué estás usando ese número: un porcentaje, una cantidad monetaria, la cantidad de ángeles que pueden bailar en la cabeza de un alfiler, etc. Es solo un número. .
Deberá almacenar dos datos: el número y el hecho de que es un porcentaje.
Hola, si desea mantener el tipo de número en la etiqueta de entrada, entonces es bueno ir con bootstrap input-group-append/prepend para agregar el signo %. esto mantendrá la entrada con formato de número y también podrá mostrar el signo %.
echa un vistazo a esta demostración.
<!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/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>