Campo di immissione di testo HTML con simbolo di valuta

Vorrei avere un campo di immissione di testo contenente il segno "$" all'inizio e, indipendentemente dalle modifiche apportate al campo, affinché il segno sia persistente.

Sarei buono se solo i numeri fossero accettati per l'input, ma è solo un'aggiunta di fantasia.

Considerare la simulazione di un campo di input con un prefisso o un suffisso fisso utilizzando un intervallo con un bordo attorno a un campo di input senza bordi. Ecco un esempio di kickoff di base:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Usa un .input-icondiv genitore . Facoltativamente aggiungere .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>

Allinea l'icona verticalmente con transforme tope imposta pointer-eventssu in nonemodo che i clic si concentrino sull'input. Regolare paddinge widthcome appropriato:

.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 differenza della risposta accettata, questa manterrà l'evidenziazione della convalida dell'input, come un bordo rosso in caso di errore.

Esempio di utilizzo di JSFiddle con Bootstrap e Font Awesome

Puoi racchiudere il tuo campo di input in un intervallo, che tu position:relative;. Quindi aggiungi con il :before content:"€"tuo simbolo di valuta e fallo position:absolute. JSFiddle funzionante

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

Aggiorna Se si desidera inserire il simbolo dell'euro a sinistra oa destra della casella di testo. JSFiddle funzionante

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

Dal momento che non puoi fare ::beforecon gli content: '$'input e l'aggiunta di un elemento posizionato in modo assoluto aggiunge html extra, mi piace farlo a un css inline SVG in background.

Va più o meno così:

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

Emette quanto segue:

Nota: il codice deve essere tutto su una sola riga. Il supporto è abbastanza buono nei browser moderni, ma assicurati di testarlo.

Ho finito per aver bisogno che il tipo rimanesse ancora come numero, quindi ho usato CSS per inserire il simbolo del dollaro nel campo di input utilizzando una posizione assoluta.

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

Metti il ​​"$" davanti al campo di immissione del testo, invece che al suo interno. Rende la convalida dei dati numerici molto più semplice perché non è necessario analizzare il "$" dopo l'invio.

Puoi, con JQuery.validate () (o altro), aggiungere alcune regole di convalida lato client che gestiscono la valuta. Ciò ti consentirebbe di avere il "$" all'interno del campo di input. Ma devi ancora eseguire la convalida lato server per motivi di sicurezza e questo ti rimette nella posizione di dover rimuovere '$'.

 $<input name="currency">

Vedere anche: Limitazione dell'input alla casella di testo: consentire solo numeri e virgola decimale

Se hai solo bisogno di supportare Safari, puoi farlo in questo modo:

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

e un campo di input come

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

In questo modo non hai bisogno di un tag aggiuntivo e mantieni le informazioni sui simboli nel markup.

Un'altra soluzione che preferisco è utilizzare un elemento di input aggiuntivo per un'immagine del simbolo di valuta. Ecco un esempio utilizzando un'immagine di una lente di ingrandimento all'interno di un campo di testo di ricerca:

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

Ciò si traduce nell'input sulla barra laterale sinistra qui:

https://fsfe.org

Ho appena usato: prima con l'input e ho passato $ come contenuto

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

Per il bootstrap funziona

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

Non utilizzare class = "form-control" nel campo di input.

Nessuna di queste risposte aiuta davvero se sei preoccupato di allineare il bordo sinistro con altri campi di testo in un modulo di input.

Ti consiglio di posizionare il segno del dollaro assolutamente a sinistra di circa -10px o di 5px a sinistra (a seconda che tu lo voglia all'interno o all'esterno della casella di input). La soluzione interna richiede una direzione: rtl sul css di input.

Potresti anche aggiungere il riempimento all'input per evitare la direzione: rtl, ma ciò modificherà la larghezza del contenitore di input in modo che non corrisponda agli altri contenitori della stessa larghezza.

<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

Esempio: 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ì, se stai usando bootstrap, funzionerebbe.

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