Campo de entrada de texto HTML con símbolo de moneda

Me gustaría tener un campo de entrada de texto que contenga el signo "$" al principio, y no importa qué edición se produzca en el campo, que el signo sea persistente.

Sería bueno si solo se aceptaran números como entrada, pero eso es solo una adición elegante.

Considere la posibilidad de simular un campo de entrada con un prefijo o sufijo fijo utilizando un intervalo 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>

Utilice un .input-icondiv padre . Opcionalmente agregue .input-icon-right.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

Alinee el icono verticalmente con transformy top, y configúrelo pointer-eventsen nonepara que los clics se enfoquen en la entrada. Ajuste el paddingy widthsegú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 mantendrá resaltado la validación de entrada, como un borde rojo cuando hay un error.

Ejemplo de uso de JSFiddle con Bootstrap y Font Awesome

Puede envolver su campo de entrada en un intervalo, que usted position:relative;. Luego agrega con :before content:"€"su símbolo de moneda y lo crea 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 colocar 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;
 }

Como no puede hacer ::beforecon las content: '$'entradas y agregar un elemento absolutamente posicionado agrega html adicional, me gusta hacerlo con un CSS en línea SVG 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;
}

Produce lo siguiente:

Nota: el código debe estar todo en una sola línea. El soporte es bastante bueno en los navegadores modernos, pero asegúrese de probar.

Terminé necesitando que el tipo permaneciera como un número, así que usé CSS para empujar el signo de dólar en el campo de entrada usando una posición absoluta.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>

Coloque el '$' delante del campo de entrada de texto, en lugar de dentro de él. Hace que la validación de datos numéricos sea mucho más fácil porque no tiene que analizar el '$' después del envío.

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 por seguridad y eso lo pone de nuevo en la posición de tener que eliminar el '$'.

 $<input name="currency">

Ver también: Restringir la entrada al cuadro de texto: permitir solo números y punto decimal

Si solo necesita ser compatible con 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 manera, no necesita una etiqueta adicional y mantiene la información del símbolo en el marcado.

Otra solución que prefiero es utilizar un elemento de entrada adicional para una imagen del símbolo de la moneda. Aquí hay un ejemplo que usa 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í:

https://fsfe.org

Acabo de usar: antes con la entrada y pasé $ como contenido

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}

Para arrancar sus obras

<span class="form-control">$ <input type="text"/></span>

No use class = "form-control" en el campo de entrada.

Ninguna de estas respuestas es realmente útil si le preocupa alinear el borde izquierdo con otros campos de texto en un formulario de entrada.

Recomendaría colocar el signo de dólar absolutamente a la izquierda alrededor de -10px o 5px a la izquierda (dependiendo de si lo desea dentro o fuera del cuadro de entrada). La solución interna requiere la 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

<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%

Sí, si está utilizando bootstrap, esto funcionaría.

.form-control input {
    border: none;
    padding-left: 4px;
}

y

<span class="form-control">$ <input type="text"/></span>

.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>