HTML-Texteingabefeld mit Währungssymbol

Ich hätte gerne ein Texteingabefeld, das ganz am Anfang das Zeichen "$" enthält, und unabhängig davon, welche Bearbeitung das Feld vornimmt, damit das Zeichen dauerhaft bleibt.

Ich wäre gut, wenn nur Zahlen für die Eingabe akzeptiert würden, aber das ist nur eine ausgefallene Ergänzung.

Erwägen Sie die Simulation eines Eingabefelds mit einem festen Präfix oder Suffix unter Verwendung eines Bereichs mit einem Rand um ein randloses Eingabefeld. Hier ist ein grundlegendes Kickoff-Beispiel:

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

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

Verwenden Sie ein übergeordnetes .input-icondiv. Optional hinzufügen .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>

Richten Sie das Symbol vertikal an transformund aus topund stellen Sie pointer-eventses noneso ein, dass Klicks den Fokus auf die Eingabe richten . Passen Sie das paddingund widthnach Bedarf an:

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

Im Gegensatz zur akzeptierten Antwort bleibt die Hervorhebung der Eingabevalidierung erhalten, z. B. ein roter Rand, wenn ein Fehler auftritt.

JSFiddle-Anwendungsbeispiel mit Bootstrap und Font Awesome

Sie können Ihr Eingabefeld in einen Bereich einschließen, den Sie position:relative;. Dann fügen Sie mit :before content:"€"Ihrem Währungssymbol hinzu und machen es position:absolute. Arbeiten 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;
}

Update Wenn Sie das Euro-Symbol entweder links oder rechts im Textfeld platzieren möchten. Arbeiten 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;
 }

Da Sie ::beforemit content: '$'Eingaben nichts anfangen können und ein absolut positioniertes Element hinzufügen, wird zusätzliches HTML hinzugefügt - ich mache es gerne mit einem SVG-Inline-CSS im Hintergrund.

Es geht ungefähr so:

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

Es gibt Folgendes aus:

Hinweis: Der Code muss sich alle in einer einzigen Zeile befinden. Die Unterstützung ist in modernen Browsern ziemlich gut, aber testen Sie sie unbedingt.

Am Ende brauchte ich den Typ, um immer noch als Zahl zu bleiben, also benutzte ich CSS, um das Dollarzeichen mit einer absoluten Position in das Eingabefeld zu schieben.

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

Platzieren Sie das '$' vor dem Texteingabefeld und nicht darin. Dies erleichtert die Validierung numerischer Daten erheblich, da Sie das '$' nach dem Senden nicht mehr analysieren müssen.

Mit JQuery.validate () (oder anderen) können Sie einige clientseitige Validierungsregeln hinzufügen, die mit Währungen umgehen. Das würde es Ihnen ermöglichen, das '$' im Eingabefeld zu haben. Aus Sicherheitsgründen müssen Sie jedoch noch eine serverseitige Überprüfung durchführen, sodass Sie das '$' wieder entfernen müssen.

 $<input name="currency">

Siehe auch: Eingabe auf Textfeld beschränken: Nur Zahlen und Dezimalstellen zulassen

Wenn Sie Safari nur unterstützen müssen, können Sie dies folgendermaßen tun:

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

und ein Eingabefeld wie

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

Auf diese Weise benötigen Sie kein zusätzliches Tag und behalten die Symbolinformationen im Markup.

Eine andere Lösung, die ich bevorzuge, ist die Verwendung eines zusätzlichen Eingabeelements für ein Bild des Währungssymbols. Hier ist ein Beispiel mit einem Bild einer Lupe in einem Suchtextfeld:

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

Dies führt hier zur Eingabe in der linken Seitenleiste:

https://fsfe.org

Ich habe gerade: vorher mit der Eingabe verwendet und $ als Inhalt übergeben

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

Für Bootstrap funktioniert es

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

Verwenden Sie im Eingabefeld nicht class = "form-control".

Keine dieser Antworten hilft wirklich, wenn Sie den linken Rand an anderen Textfeldern in einem Eingabeformular ausrichten möchten.

Ich würde empfehlen, das Dollarzeichen absolut links zu positionieren, etwa -10px oder links 5px (je nachdem, ob Sie es innerhalb oder außerhalb des Eingabefelds möchten). Die innere Lösung erfordert die Richtung: rtl auf dem Eingabe-CSS.

Sie können der Eingabe auch Auffüllungen hinzufügen, um die Richtung zu vermeiden: rtl. Dadurch wird jedoch die Breite des Eingabecontainers so geändert, dass sie nicht mit den anderen Containern derselben Breite übereinstimmt.

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

oder

<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

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

%.

Ja, wenn Sie Bootstrap verwenden, würde dies funktionieren.

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

und

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