Campo de entrada de texto HTML com símbolo de moeda


104

Eu gostaria de ter um campo de entrada de texto contendo o sinal "$" logo no início, e não importa a edição que ocorra no campo, para que o sinal seja persistente.

Eu seria bom se apenas números fossem aceitos para entrada, mas isso é apenas uma adição extravagante.

Respostas:


103

Considere simular um campo de entrada com um prefixo ou sufixo fixo usando um intervalo com uma borda ao redor de um campo de entrada sem borda. Aqui está um exemplo básico de lançamento:

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


13
adicionalmente, você pode envolver o '$' dentro de uma tag <Label>. Isso moverá o foco para o campo de entrada quando eles clicarem no '$' - texto
Cohen

2
@Cohen Embora seja uma boa ideia, ter mais de uma etiqueta pode causar problemas de acessibilidade .
rybo111

63

Use um .input-icondiv pai . Adicione opcionalmente .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>

Alinhe o ícone verticalmente com transforme tope defina pointer-eventscomo nonepara que os cliques foquem na entrada. Ajuste o paddinge widthconforme apropriado:

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

Ao contrário da resposta aceita, isso manterá o destaque de validação de entrada, como uma borda vermelha quando houver um erro.

Exemplo de uso do JSFiddle com Bootstrap e Font Awesome


Eu queria isso com um botão em uma linha elegante e tive que adicionar float:leftao input-symboldiv
kluka

@ rybo111 não, quis dizer um botão separado que está fora do input-symbolcontêiner
kluka

Você está certo, floaté ruim, então estou usando display:inline-blockcombinado com vertical-align:bottomagora :) Não consigo fazer um violino rapidamente, há muitos outros CSS acontecendo no meu exemplo atual ;-)
kluka 01 de

1
Eu gosto mais dessa resposta do que da aceita, pois (como o autor menciona) mantém o comportamento de validação do bootstrap que é ótimo! Obrigado por essa ajuda.
Vadiraj

30

Você pode envolver seu campo de entrada em um intervalo, que você position:relative;. Então você adiciona com :before content:"€"seu símbolo de moeda e o faz position:absolute. JSFiddle de trabalho

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

Atualizar Se você deseja colocar o símbolo do euro à esquerda ou à direita da caixa de texto. JSFiddle de trabalho

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

Isso é muito próximo do que eu quero, mas a entrada não é fixa na largura da página e não pode usar absoluto. Relativo também move o símbolo. Como podemos definir a posição absoluta / relativa ao canto superior esquerdo de entrada?
nwolybug

A moeda euro é sempre mostrada à direita. Você deve colocar seu símbolo à direita em vez de à esquerda.
jadok

Sou francês e o preço está sempre escrito como 2,50 €, não € 2,50, e tenho certeza de que o outro país da zona do euro faz o mesmo.
jadok

2
@jadok Eu moro na Holanda, aqui os preços são escritos em € 2,50.
Vincent Kok de

1
@VincentKok Depois de perguntar por aí parece que depende do país, o país europeu latino (França, Espanha, ...) vai colocá-lo à direita e o país europeu do norte / leste à esquerda, você pode tentar com amazone por exemplo : www.amazone.fr, www.amazone.nl, ...
jadok

22

Já que você não pode fazer ::beforecom content: '$'entradas e adicionar um elemento posicionado absolutamente adiciona html extra - eu gosto de fazer em um css SVG embutido de fundo.

É mais ou menos assim:

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

Ele produz o seguinte:

css do fundo do cifrão svg

Nota: o código deve estar em uma única linha. O suporte é muito bom em navegadores modernos, mas certifique-se de testar.


2
Ótima solução. Acabei adicionando background-repeat: no-repeat;conforme o $ se repetia na caixa de entrada.
Hamid Tavakoli

Como os navegadores podem renderizar elementos de entrada como "elementos substituídos" (por exemplo, como widgets nativos do sistema), isso significa que background-imagepode não ser compatível ou o navegador pode renderizar o próprio widget em vez de usar os widgets fornecidos pelo sistema.
Dia

4

Acabei precisando que o tipo ainda permanecesse como um número, então usei CSS para empurrar o cifrão no campo de entrada usando uma posição absoluta.

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


3

Coloque o '$' na frente do campo de entrada de texto, em vez de dentro dele. Isso torna a validação de dados numéricos muito mais fácil porque você não precisa analisar o '$' após o envio.

Você pode, com JQuery.validate () (ou outro), adicionar algumas regras de validação do lado do cliente que lidam com moeda. Isso permitiria que você tivesse o '$' dentro do campo de entrada. Mas você ainda tem que fazer a validação do lado do servidor para segurança e isso o coloca de volta na posição de ter que remover o '$'.


1
Obrigado! Eu estava ciente disso, mas na verdade precisava que meu sinal monetário estivesse dentro do campo de texto. Há uma resposta melhor abaixo, que acredito pode ser útil para muitas pessoas.
User3419

@Hristo: Fico feliz que você tenha encontrado uma solução adequada. Mas, para registro, aquele que você marcou como resposta não coloca seu $ no campo de entrada. Só faz com que pareça estar lá com estilo. Dito isso, é definitivamente bom!
dnagirl

1
Sim, ele resolve visualmente o problema, enquanto sua sugestão é apenas apontar (sim, ainda na direção certa), mas eu não chamaria de solução. Muito obrigado novamente e lembre-se de que não tive a intenção de ofender ninguém aqui!
User3419


2

Se você só precisa oferecer suporte ao Safari, pode fazer assim:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

e um campo de entrada como

<input class="currency" data-symbol="€" type="number" value="12.9">

Desta forma, você não precisa de uma tag extra e mantém as informações do símbolo na marcação.


7
: before e: after Os pseudo seletores CSS podem ser usados ​​apenas para tags de contêiner e não funcionam para tag de entrada. stackoverflow.com/questions/2587669/…
Venkatesh Nannan

1

Outra solução que prefiro é usar um elemento de entrada adicional para uma imagem do símbolo monetário. Aqui está um exemplo de uso da imagem de uma lupa em um campo de texto de pesquisa:

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

Isso resulta na entrada na barra lateral esquerda aqui:

https://fsfe.org


1

Acabei de usar: antes com a entrada e passei $ como o conteúdo

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

1
Não consigo reproduzir isso no Chrome. Você pode postar um exemplo funcional do JSFiddle?
Dai

as entradas não suportam pseudoelementos em CSS3. Em outras palavras, é impossível com CSS puro. No entanto, se estiver usando jquery, você pode usar $ ("input"). After ("$");
TaterJuice

0

Para inicializar seus trabalhos

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

Não use class = "form-control" no campo de entrada.


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>


Código sem explicação faz pouco para ajudar o OP ou futuros visualizadores desta resposta. Você deve explicar como isso responde à pergunta.
leigero

0

Nenhuma dessas respostas realmente ajuda se você estiver preocupado em alinhar a borda esquerda com outros campos de texto em um formulário de entrada.

Eu recomendo posicionar o cifrão absolutamente à esquerda cerca de -10px ou 5px à esquerda (dependendo se você quiser dentro ou fora da caixa de entrada). A solução interna requer direção: rtl no css de entrada.

Você também pode adicionar preenchimento à entrada para evitar a direção: rtl, mas isso irá alterar a largura do contêiner de entrada para não corresponder aos outros contêineres da mesma largura.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

ou

<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

Exemplo: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview


1
Nenhuma das respostas ajudará nisso porque não é isso que a pergunta solicitada. O símbolo deve estar dentro da entrada.
rybo111

Tecnicamente, as respostas css também não estão colocando o cifrão dentro do contêiner de entrada. Acho que a solução de CSS aceita é a introdução de um problema de alinhamento complicado quando aplicada a uma forma típica. Conforme visto aqui: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler

Atualizei esta solução para colocar o cifrão dentro da entrada: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (posição absoluta esquerda 5px e definir direção de entrada para 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>

%


-1

Sim, se você estiver usando bootstrap, isso funcionaria.

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

e

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

-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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.