kutombawewe.net

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 "$" desde el principio, y no importa qué edición se realice en el campo, para que el signo sea persistente.

Estaría bien si solo se aceptaran números para la entrada, pero eso es solo una adición elegante.

86
User3419

Considere la posibilidad de simular un campo de entrada con un prefijo fijo o sufijo utilizando un espacio con un borde alrededor de un campo de entrada sin bordes. Aquí hay un ejemplo de arranque básico:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
92
BalusC

Utilice un código principal .input-icon div. 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 transform y top, y configure pointer-events en none para que los clics se centren en la entrada. Ajuste la padding y 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 mantendrá el resaltado de validación de entrada, como un borde rojo cuando hay un error.

Ejemplo de uso de JSFiddle con Bootstrap y Font Awesome

51
rybo111

Puede ajustar su campo de entrada en un intervalo, que position:relative;. Luego agrega con :beforecontent:"€" su símbolo de moneda y lo convierte 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 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;
 }
28
Philipp Hofmann

Ya que no puede hacer ::before con content: '$' en las entradas y agregar un elemento absolutamente posicionado agrega html extra - Me gusta hacerlo en un fondo SVG en línea css.

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;
}

Da salida a lo siguiente:

 svg dollar sign background css 

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

16
Jeff Callahan

Coloque la '$' delante del campo de entrada de texto, en lugar de dentro de él. Facilita la validación de los datos numéricos porque no tiene que analizar el '$' después de enviarlo.

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 aún tiene que hacer la validación del lado del servidor para la seguridad y eso lo pone nuevamente en la posición de tener que eliminar el '$'.

3
dnagirl
2
Quentin

Si solo necesitas soportar Safari, puedes hacerlo de esta manera:

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 mantenga la información del símbolo en el marcado.

2
Sebastian

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

1
Sam Tuke

Terminé necesitando que el tipo siguiera siendo un número, así que usé CSS para insertar 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>
0
Andy

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

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

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

Recomiendo colocar el signo de dólar absolutamente a la izquierda sobre -10px o 5px a la izquierda (dependiendo de si lo desea 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

0
Ted Scheckler