texto - input html
Campo de entrada de texto HTML con sÃmbolo de moneda (11)
Coloque el ''$'' delante del campo de entrada de texto, en lugar de dentro. Hace la validación de los datos numéricos mucho más fácil porque no tiene que analizar el ''$'' después de enviar.
Puede, con JQuery.validate() (u otro), agregar algunas reglas de validación del lado del cliente que manejan la moneda. Eso le permitiría tener el ''$'' dentro del campo de entrada. Pero todavía tiene que hacer la validación del lado del servidor para la seguridad y eso lo coloca nuevamente en la posición de tener que eliminar el ''$''.
Me gustaría tener un campo de entrada de texto que contenga el signo "$" desde el principio, y no importa qué edición se produzca en el campo, para que el signo sea persistente.
Sería bueno si solo se aceptaran los números, pero eso es solo una adición elegante.
Como no puedes hacer ::before con el content: ''$'' en las entradas y agregar un elemento absolutamente posicionado agrega html extra - me gusta hacer un CSS SVG en línea de fondo.
Es algo parecido a esto:
input {
width: 85px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' version=''1.1'' height=''16px'' width=''85px''><text x=''2'' y=''13'' fill=''gray'' font-size=''12'' font-family=''arial''>$</text></svg>");
padding-left: 12px;
}
Emite lo siguiente:
Nota: el código debe estar en una sola línea. El soporte es bastante bueno en los navegadores modernos, pero asegúrese de probarlo.
Considere la posibilidad de simular un campo de entrada con un prefijo o sufijo fijo utilizando un tramo con un borde alrededor de un campo de entrada sin bordes. Aquí hay un ejemplo básico de inicio:
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
Ninguna de estas respuestas realmente ayuda si le preocupa la alineación del borde izquierdo con otros campos de texto en un formulario de entrada.
Yo recomendaría posicionar el signo del dólar absolutamente a la izquierda, alrededor de -10 px o dejar 5 px (dependiendo de si lo quiere dentro o fuera del cuadro de entrada). La solución interna requiere dirección: rtl en la entrada css.
También puede agregar relleno a la entrada para evitar la dirección: rtl, pero eso alterará el ancho del contenedor de entrada para que no coincida con los otros contenedores del mismo ancho.
<div style="display:inline-block">
<div style="position:relative">
<div style="position:absolute; left:-10px;">$</div>
</div>
<input type=''text'' />
</div>
o
<div style="display:inline-block">
<div style="position:relative">
<div style="position:absolute; left:5px;">$</div>
</div>
<input type=''text'' style=''direction: rtl;'' />
</div>
https://i.imgur.com/ajrU0T9.png
Ejemplo: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview
Otra solución que prefiero es usar un elemento de entrada adicional para una imagen del símbolo de moneda. Aquí hay un ejemplo usando una imagen de una lupa dentro de un campo de texto de búsqueda:
html:
<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">
css:
#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}
Esto da como resultado la entrada en la barra lateral izquierda aquí:
Para bootstrap, funciona
<span class="form-control">$ <input type="text"/></span>
No use class = "form-control" en el campo de entrada.
Puede envolver su campo de entrada en un tramo, que puede position:relative; . A continuación, agregue con :before content:"€" su símbolo de moneda y colóquelo en position:absolute . Trabajando JSFiddle
HTML
<span class="input-symbol-euro">
<input type="text" />
</span>
CSS
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-left:18px;
}
.input-symbol-euro:before {
position: absolute;
top: 0;
content:"€";
left: 5px;
}
Actualizar si desea poner el símbolo del euro en el lado izquierdo o derecho del cuadro de texto. Trabajando JSFiddle
HTML
<span class="input-euro left">
<input type="text" />
</span>
<span class="input-euro right">
<input type="text" />
</span>
CSS
.input-euro {
position: relative;
}
.input-euro.left input {
padding-left:18px;
}
.input-euro.right input {
padding-right:18px;
text-align:end;
}
.input-euro:before {
position: absolute;
top: 0;
content:"€";
}
.input-euro.left:before {
left: 5px;
}
.input-euro.right:before {
right: 5px;
}
Si solo necesita admitir Safari, puede hacerlo así:
input.currency:before {
content: attr(data-symbol);
float: left;
color: #aaa;
}
y un campo de entrada como
<input class="currency" data-symbol="€" type="number" value="12.9">
De esta forma, no necesita una etiqueta adicional y conserva la información del símbolo en el marcado.
Use un padre .input-icon div. Opcionalmente agregue .input-icon-right .
<div class="input-icon">
<i>$</i>
<input type="text">
</div>
<div class="input-icon input-icon-right">
<i>€</i>
<input type="text">
</div>
Alinee el icono verticalmente con transform y top , y establezca pointer-events en none para que los clics se centren en la entrada. Ajuste el padding y el width según corresponda:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}
A diferencia de la respuesta aceptada, esto retendrá resaltado de validación de entrada, como un borde rojo cuando hay un error.
.currencyinput {
border: 1px inset #ccc;
padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
$<input name="currency">
Consulte también: Restringir entrada al cuadro de texto: permitiendo solo números y punto decimal