0
389
Views¿Cómo agregar un texto al final de la entrada y cómo eliminar el valor predeterminado arriba y abajo para el número de tipo de entrada?
Quiero construir una entrada con texto fijo | KG al final, y elimine el tipo de número de entrada predeterminado ^ v :
Eso es lo que quiero
Eso es lo que he intentado hasta ahora:
function isNumberKey(txt, evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode == 46) { if (txt.value.indexOf('.') === -1) { return true; } else { return false; } } else { if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; } return true; } .field { display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; font-size: 1.1rem; text-transform: uppercase; background-color: rgba(36, 141, 127, 0.4); } input { background-color: rgba(14, 78, 72, 0.6); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 9px; outline: none; color: wheat; font-size: 1.1rem; position: relative; } .kg::after { content: "| KG"; position: absolute; right: 3px; top: 2px; } <html> <body> <div class="field"> <label for="gesier"> gesier</label> <input type="number" id="gesier" class="kg" onkeypress="return isNumberKey(this,event);" /> </div> </body> <style></style> </html>
·
Juan Pablo Isaza
1 answers
Answer question0
Debe envolver la entrada y el texto (KG) con un contenedor. estos contenedores asignan una posición: relativa;. La etiqueta que contiene el texto KG asigna la posición: absoluta.
Para ocultar las flechas en su campo de entrada, puede usar la propiedad css: -moz-appearance: textfield;
input[type=number] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }ejemplo de trabajo
.field { display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; font-size: 1.1rem; text-transform: uppercase; background-color: rgba(36, 141, 127, 0.4); } .wrapper { position:relative; } span { position:absolute; top:10px; right: 10px; } input { background-color: rgba(14, 78, 72, 0.6); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 9px; outline: none; color: wheat; font-size: 1.1rem; position: relative; } .kg::after { content: "| KG"; position: absolute; right: 3px; top: 2px; } input[type=number] { -moz-appearance: textfield; } <html> <body> <div class="field"> <label for="gesier"> gesier</label> <div class="wrapper"> <input type="number" id="gesier" class="kg" /> <span>kg</span> </div> </div> </body> <style></style> </html>
·
Juan Pablo Isaza
Report
Answer question