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

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.

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>

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

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

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:

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

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>

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

 $<input name="currency">

Consulte também: Restringindo a entrada para caixa de texto: permitindo apenas números e casas decimais

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.

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

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

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

Para inicializar seus trabalhos

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

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

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

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

%

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>

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