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

104

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.

Usuario3419
fuente

Respuestas:

103

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>

BalusC
fuente
13
además, puede envolver el '$' dentro de una etiqueta <Label>. Esto moverá el foco al campo de entrada cuando hagan clic en el texto '$'
Cohen
2
@Cohen Aunque es una buena idea, tener más de una etiqueta puede causar problemas de accesibilidad .
rybo111
63

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

rybo111
fuente
Quería esto con un botón en una línea ordenada y tuve que agregarlo float:leftal input-symboldiv
kluka
@ rybo111 no, me refiero a un botón separado que está fuera del input-symbolcontenedor
kluka
Tienes razón, floates malo, así que lo estoy usando display:inline-blockcombinado con vertical-align:bottomahora :) Sin embargo, no puedo hacer un violín rápidamente, hay demasiados CSS en mi ejemplo actual ;-)
kluka
1
Me gusta esta respuesta que la aceptada ya que esto (como menciona el autor) conserva el comportamiento de validación de bootstrap, ¡lo cual es genial !, gracias por esta ayuda.
Vadiraj
30

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;
 }
Philipp Hofmann
fuente
Esto está muy cerca de lo que quiero, pero la entrada no es estacionaria en el ancho de la página y no puede usar absoluta. Relativo también mueve el símbolo. ¿Cómo podemos establecer la posición absoluta / relativa a la esquina superior izquierda de entrada?
nwolybug
La moneda del euro siempre se muestra a la derecha. Debe poner su símbolo a la derecha en lugar de a la izquierda.
jadok
Soy francés y el precio siempre se escribe como 2,50 €, no 2,50 € y estoy bastante seguro de que el otro país de la zona euro hará lo mismo.
jadok
2
@jadok Vivo en los Países Bajos, aquí los precios están escritos en 2,50 €.
Vincent Kok
1
@VincentKok Después de preguntar parece que depende del país, el país de los europeos latinos (Francia, España, ...) lo pondrá a la derecha y el país de los europeos del noreste a la izquierda, puedes probarlo con amazone por ejemplo : www.amazone.fr, www.amazone.nl, ...
jadok
22

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:

svg signo de dólar fondo css

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.

Jeff Callahan
fuente
2
Buena solucion. Terminé agregando background-repeat: no-repeat;ya que $ se repetía en el cuadro de entrada.
Hamid Tavakoli
Como los navegadores pueden representar elementos de entrada como "elementos reemplazados" (por ejemplo, como widgets nativos del sistema), significa que background-imagepuede que no sea compatible, o que el navegador puede representar el widget en sí mismo en lugar de utilizar los widgets proporcionados por el sistema.
Dai
4

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>

Andy
fuente
3

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 '$'.

dnagirl
fuente
1
¡Gracias! Era consciente de eso, pero en realidad necesitaba que mi signo de moneda estuviera dentro del campo de texto. Hay una mejor respuesta a continuación que creo que puede ser de ayuda para muchas personas.
User3419
@Hristo: Me alegra que haya encontrado una solución que se adapta. Pero para el registro, el que ha marcado como la respuesta no coloca su $ en el campo de entrada. Solo hace que parezca estar ahí con estilo. Dicho esto, ¡definitivamente es elegante!
dnagirl
1
Sí, resuelve visualmente el problema, mientras que su sugerencia solo apunta (sí, todavía en la dirección correcta), pero yo no lo llamaría solución. ¡Muchas gracias de nuevo y recuerden que no quise ofender a nadie aquí!
User3419
2

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.

Sebastián
fuente
7
: before y: after Los pseudo selectores CSS se pueden usar solo para etiquetas de contenedor y no funcionan para etiquetas de entrada. stackoverflow.com/questions/2587669/…
Venkatesh Nannan
1

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

Sam Tuke
fuente
1

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

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}
DynamisDesarrollo
fuente
1
No puedo reproducir esto en Chrome. ¿Puedes publicar un ejemplo funcional de JSFiddle?
Dai
las entradas no admiten pseudo elementos en CSS3. En otras palabras, es imposible con CSS puro. Sin embargo, si usa jquery puede usar $ ("input"). After ("$");
TaterJuice
0

Para arrancar sus obras

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

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

Jestin
fuente
0

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>

Cristiano bocaz
fuente
El código sin explicación hace poco para ayudar al OP o a los futuros espectadores de esta respuesta. Debe explicar cómo esto responde a la pregunta.
leigero
0

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

Ted Scheckler
fuente
1
Ninguna de las respuestas ayudará con eso porque eso no es lo que solicitó la pregunta. Se supone que el símbolo está dentro de la entrada.
rybo111
Técnicamente, las respuestas css tampoco ponen el signo de dólar dentro del contenedor de entrada. Creo que la solución CSS aceptada está introduciendo un problema de alineación complicado cuando se aplica a una forma típica. Como se ve aquí: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler
Actualicé esta solución para colocar el signo de dólar dentro de la entrada: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (posición absoluta izquierda 5px y establecer la dirección de entrada a rtl)
Ted Scheckler
0

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

%

Ashish Rajput
fuente
-1

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>
Johnson Carneiro
fuente
-1
.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>
Ashish Rajput
fuente